jQuery的点击功能只工作一次(新局面)(jQuery click function only w

2019-10-19 02:47发布

UPDATE:链接到该网站http://lucasvallim.com/previews/example/servicos.html

我需要删除的DIV每.item_index里的所有ID和事后ID #servico_ativo添加到被点击的一个。

它只能使用一次,其他的点击将刚才添加的ID的被点击链接,不会再删除的ID ...

或者,如果可能的话,另一种解决方案是使用类,而不是身份证。 但在这种情况下,我会从所有项目里只删除类“servico_ativo”,然后这个相同的类添加到项目点击。

id为“servico_ativo”,增加了一个css来获取字体加粗,也是一个背景,以利项目,用户点击..它是相当简单,但我不使用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:

使用在(),而不是点击()

$( "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 S的关系永远是一个HTML文档中是唯一的。

相反设置的id的元素,你可以为它分配一个class 。 不像id S,一些HTML元素可以有相同的class

更改

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

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



Answer 4:

与您的代码的家伙没问题...

您需要变化不大...

普通点击不重视的事件处理函数的一个或多个事件。 这样可以在方法 - 将一个事件处理函数的一个或多个事件来选择的元素。

试试这个代码,并请参阅以下链接:

Jquery的。对()方法

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 click function only working once (new situation)