javascript - jQuery 点击函数只工作一次(新情况)

Question

更新:网站链接 http://lucasvallim.com/previews/example/servicos.html

我需要删除 div 上每个 .item_index li 的所有 ID，然后将 ID #servico_ativo 添加到被单击的 ID。

它只工作一次，其他点击只会将 ID 添加到点击的链接，不会再删除 ID...

或者，如果可能，另一种解决方案是使用类而不是 id。但在这种情况下，我只需要从所有 li 项目中删除类“servico_ativo”，然后将这个相同的类添加到单击的项目。

id“servico_ativo”添加了一个 css 来使字体变得粗体，并且还为用户单击的 li 项目添加了背景。这很简单，但我对 jquery 还不是很好。

欢迎所有解决方案。

有什么建议吗？

$("a.click_assessoria").click(function(){ 

    $(".conteudo_dinamico").empty() 

    $.get('assessoria.html', function(result) {
        $('.conteudo_dinamico').append(result);
    });


    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');



});

$("a.click_projeto").click(function(){ 

    $(".conteudo_dinamico").empty() 

    $.get('projeto.html', function(result) {
        $('.conteudo_dinamico').append(result);
    });

    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');



});

$("a.click_instalacao").click(function(){ 

    $(".conteudo_dinamico").empty() 

    $.get('instalacao.html', function(result) {
        $('.conteudo_dinamico').append(result);
    });

    $(".item_index").removeAttr("id");

    $(this).attr('id', 'servico_ativo');



});

Answer 1

事实证明这与事件委托(delegate)无关，问题在于分配事件状态

$(".item_index").removeAttr("id");
$(this).parent().attr('id', 'servico_ativo');

很少有改进可以应用于此

1. 使用data-*存储目标资源路径
2. 使用名为 active 的类来引用事件的导航项

尝试

<a href="#" class="item_index click click_assessoria" data-target="assessoria.html">assessoria</a>
<a href="#" class="item_index click click_projeto" data-target="assessoria.html">assessoria</a>
<a href="#" class="item_index click click_instalacao" data-target="instalacao.html">instalacao</a>

然后

var $dinamico = $('.conteudo_dinamico');
$('a.click').on('click', function () {
    $dinamico.empty()
    $.get($(this).data('target'), function (result) {
        $dinamico.append(result);
        $(".item_index").removeClass("active");
        $(this).parent().addClass('servico_ativo');
    });
});