jQuery click function only working once (new situation)

Question

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



});

Answer 1

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



});

Answer 2

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

1. Use data-* to store the target resource path
2. 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');
    });
});

Answer 3

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

});

Answer 4

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