jQuery点击功能只工作一次（新情况） [英] jQuery click function only working once (new situation)

问题描述

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

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

I need to remove all the IDs of every .item_index li on the div and afterwards add the id #servico_ativo to the one that was clicked.

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

It only works once, the other clicks will just add the ID to the clicked link and will not remove the IDs anymore...

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

OR, if possible, another solution would be to use class instead of id. but in this case, i would have to remove only the class "servico_ativo" from all the li items, and then add this same class to the clicked item.

idservico_ativo添加了一个css以获得粗体的字体，也是用户点击的li项目的背景..它很简单，但我不是所以很好用jquery还。

the id "servico_ativo" adds a css to get the fonts bold and also a background to the li item that the user clicked.. it's quite simple but i'm not so good with jquery yet.

欢迎所有解决方案。

有任何建议吗？

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



});

推荐答案

结果是它与事件无关代理，问题是分配活动状态

As it turned out it was nothing to do with event delegation, the problem was with assigning the active state

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

很少有改进可以应用到

1. 使用 data - * 来存储目标资源路径


2. 使用 active 以引用活动导航项

1. Use data-* to store the target resource path
2. Use a class called active to refer the active navigation item

尝试

<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');
    });
});

这篇关于jQuery点击功能只工作一次（新情况）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！