Question

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

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

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

或者，如果可能的话，另一个解决方案是使用class而不是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');

很少有改进可以适用于此

使用data-*存储目标资源路径
使用名为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

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

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

更改

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

与

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

Answer 4

你的代码老兄没问题......

你需要做些什么改变......

普通Click不会为一个或多个事件附加事件处理函数。因此，使用on方法 - 将一个或多个事件的事件处理函数附加到所选元素。

试试此代码并参考此链接：

Jquery .on() method

Proper use of .on method in Jquery

$(document).ready(function(){
$(document).on('click', "a.click_assessoria", function () {
$(".conteudo_dinamico").empty()
$.get('assessoria.html', function (result) {
    $('.conteudo_dinamico').append(result);
});
$(".item_index").removeAttr("id");
$(this).attr('id', 'servico_ativo');
});

$(document).on('click', "a.click_projeto", function () {
$(".conteudo_dinamico").empty()
$.get('projeto.html', function (result) {
    $('.conteudo_dinamico').append(result);
});
$(".item_index").removeAttr("id");
$(this).attr('id', 'servico_ativo');
});

 $(document).on('click', "a.click_instalacao", function () {
$(".conteudo_dinamico").empty()
$.get('instalacao.html', function (result) {
    $('.conteudo_dinamico').append(result);
});
$(".item_index").removeAttr("id");
$(this).attr('id', 'servico_ativo');
});

}）;

jQuery点击功能只工作一次（新情况）

4 个答案: