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

事实证明，这与事件委托无关，问题在于分配活动状态。

$(".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');
    });
});

Answer 2

使用On()而不是click()

$( "a.click_assessoria" ).on("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" ).on("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" ).on("click",function(){

$(".conteudo_dinamico").empty() 

$.get('instalacao.html', function(result) {
    $('.conteudo_dinamico').append(result);
 $(".item_index").removeAttr("id");

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



});

Answer 3

您将相同的id提供给多个HTML元素。id文档中的HTML应该始终是唯一的。

与设置元素的id不同，您可以为其分配一个class。与id不同，几个HTML元素可以具有相同的class。

变化

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

使用

$(this).addClass('servico_ativo');