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



});

well looks like you end up having multiple element with same id.. ID should always be unique — bipen, Dec 09 '13 at 05:49
If all the elements he is listening to have a class of item_index, then he will not have more than one with the id. Check my answer, I think you need to add `event` to the handler and replace `this` with `event.target`. — RustyToms, Dec 09 '13 at 06:03
Rusty, i've tried your solution, but nothing happens. It's litteraly to replace the "this" with the "event.target" right? — Lucas Vallim da Costa, Dec 09 '13 at 06:12
link to the website: http://lucasvallim.com/previews/example/servicos.html — Lucas Vallim da Costa, Dec 09 '13 at 06:23
As something completely unrelated to this question yet still pertinent to your site, it looks like I have access to your directory listing: http://lucasvallim.com/previews/. (You may want to change that) — nmagerko, Dec 09 '13 at 06:30

Arun P Johny · Accepted Answer · 2013-12-09T06:54:47.413

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

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

edited Dec 09 '13 at 06:54

answered Dec 09 '13 at 05:51

Arun P Johny

384,651
66
527
531

for some reason it's not appending the html page content into the div... Actually its not doing anything... My jquery acknowledge is very limited, but do you have a clue what's possibly wrong with your code? – Lucas Vallim da Costa Dec 09 '13 at 05:55
I'll try and give you a feedback. Thanks – Lucas Vallim da Costa Dec 09 '13 at 05:59
Didn't work... have a look. link to the website: http://lucasvallim.com/previews/example/servicos.html – Lucas Vallim da Costa Dec 09 '13 at 06:24
@LucasVallimdaCosta the entire premise of the answer was wrong... so will delete it – Arun P Johny Dec 09 '13 at 06:31
@LucasVallimdaCosta it seems to be working fine for me... except the active item – Arun P Johny Dec 09 '13 at 06:33
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42767/discussion-between-lucas-vallim-da-costa-and-arun-p-johny) – Lucas Vallim da Costa Dec 09 '13 at 06:34

sumit · Answer 2 · 2013-12-09T07:18:43.000

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



});

edited Dec 09 '13 at 07:18

answered Dec 09 '13 at 05:56

sumit

332
2
7

According to the [jQuery docs for click()](http://api.jquery.com/click/): *This method is a shortcut for .on( "click", handler )* – RustyToms Dec 09 '13 at 05:59
It didint work properly... I uploaded the website..have a look: http://lucasvallim.com/previews/example/servicos.html – Lucas Vallim da Costa Dec 09 '13 at 06:25
That was my mistake $(this) will only be work within the scope of before ajax requested completion, so I have updated my post it will work for you. – sumit Dec 09 '13 at 07:20
@RustyToms on() will not unbind the event when ajax response comes. sometime click loose the event bind but on will attached event for all element even that are generated dynamically – sumit Dec 09 '13 at 07:23
@sumitnegi, that's true and a good point to be remembered. But in this case he is not dynamically creating any anchor tags, he is just changing attributes. The solution to this problem turned out to be that the ids were added to an anchor tag, and the item_index class was on the parent list item, so he was never actually removing the ids. – RustyToms Dec 09 '13 at 07:31
Ok I agree with you, I just considering that case in my mind so I answered according to it but I think it will work for this case, so please provide your feedback on it, I will be thankful to you – sumit Dec 09 '13 at 07:35

Aurélien Gasser · Answer 3 · 2013-12-09T06:01:48.863

0

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

edited Dec 09 '13 at 06:01

answered Dec 09 '13 at 05:54

Aurélien Gasser

3,043
1
20
25

If all the elements he is listening to have a class of item_index, then he will not have more than one with the id. – RustyToms Dec 09 '13 at 05:56
Thank you, but then how could i remove only this class servico_ativo when clicked on other elements (then add this class to the element clicked)? – Lucas Vallim da Costa Dec 09 '13 at 05:58
`$('.servico_ativo').removeClass('.servico_ativo')` then `$(this).addClass('servico_ativo');` – Aurélien Gasser Dec 09 '13 at 05:59
Didin't work... have a look at the website link to the website: http://lucasvallim.com/previews/example/servicos.html – Lucas Vallim da Costa Dec 09 '13 at 06:23

score 0 · Answer 4 · edited May 23 '17 at 12:20

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

});

Thank you for you reply, but could you please give me an example? I'm a jquery student and my acknowledge is very limited yet... lol — Lucas Vallim da Costa, Dec 09 '13 at 06:05

jQuery click function only working once (new situation)

4 Answers4

Linked