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

jQuery click function only working once (new situation)

本文关键字：一次 新情况 情况 功能 工作 jQuery      更新时间：2024-05-18

UPDATE：指向站点的链接http://lucasvallim.com/previews/example/servicos.html

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

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

或者，如果可能的话，另一种解决方案是使用class而不是id。但在这种情况下，我必须从所有li项中只删除class"servicoativo"，然后将该类添加到单击的项中。

id"servicoativo"添加了一个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');

});

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

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

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

});

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

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

更改

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

带有

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

你的代码伙计没问题。。。

你需要一些改变。。。

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

尝试此代码并引用此链接：

Jquery.on（）方法

Jquery 中.on方法的正确使用

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

})；

相关文章：