jQuery click function only working once (new situation)

问题

UPDATE: link to the site http://lucasvallim.com/previews/example/servicos.html

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.

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

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.

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.

All solutions are welcome.

Any suggestion?

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



});

回答1:

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

Few Improvements can be applied to this

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

Try

<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>

then

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

回答2:

Use On() instead of 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');
});



});

回答3:

You are giving the same id to multiple HTML elements. ids should always be unique within a HTML document.

Instead of setting the id of the elements, you can assign it a class. Unlike with ids, several HTML elements can have the same class.

Change

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

with

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

回答4:

No problem with your code dude...

You need little changes...

Ordinary Click does not attach an event handler functions for one or more events. So use on method - Attach an event handler function for one or more events to the selected elements.

Try this code and refer this link:

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

});

来源：https://stackoverflow.com/questions/20463959/jquery-click-function-only-working-once-new-situation

标签

javascript

jquery

html

function

click