jQuery click event not working after adding class

Question

In my JSP page I added some links:

<a class="applicationdata" href="#" id="1">Organization Data</a>
<a class="applicationdata" href="#" id="2">Business Units</a>
<a class="applicationdata" href="#" id="6">Applications</a>
<a class="applicationdata" href="#" id="15">Data Entity</a>

It has a jQuery function registered for the click event:

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");
    $('#gentab a').addClass("tabclick");
    $('#gentab a').attr('href', '#datacollector');
});

It will add a class, tabclick to <a> which is inside <li> with id="gentab". It is working fine. Here is my code for the <li>:

<li id="applndata"><a class="tabclick" href="#appdata" target="main">Application Data</a></li>
<li id="gentab"><a href="#datacollector" target="main">General</a></li>

Now I have a jQuery click handler for these links

$("a.tabclick").click(function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

For the first link it is working fine. It is alerting the <li> id. But for the second <li>, where the class="tabclick" is been added by first jQuery is not working.

I tried $("a.tabclick").live("click", function(), but then the first link click event was also not working.

about event delegation, see this SO question : http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on — LeGEC, Jun 03 '13 at 08:53

score 193 · Accepted Answer · answered Jun 03 '13 at 08:51

193

Since the class is added dynamically, you need to use event delegation to register the event handler

$(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

answered Jun 03 '13 at 08:51

Arun P Johny

384,651
66
527
531

This also works if the entire element is added after the code's execution, fantastic! – Eddie Feb 28 '15 at 19:22

score 19 · Answer 2 · answered Jun 03 '13 at 09:02

You should use the following:

$('#gentab').on('click', 'a.tabclick', function(event) {
    event.preventDefault();
    var liId = $(this).closest("li").attr("id");
    alert(liId);  
});

This will attach your event to any anchors within the #gentab element, reducing the scope of having to check the whole document element tree and increasing efficiency.

PSR · Answer 3 · 2013-06-03T08:58:21.237

13

.live() is deprecated.When you want to use for delegated elements then use .on() wiht the following syntax

$(document).on('click', "a.tabclick", function() {

This syntax will work for delegated events

.on()

edited Jun 03 '13 at 08:58

answered Jun 03 '13 at 08:52

PSR

39,804
41
111
151

j.rmz87 · Answer 4 · 2014-04-04T00:11:05.990

8

Based on @Arun P Johny this is how you do it for an input:

<input type="button" class="btEdit" id="myButton1">

This is how I got it in jQuery:

$(document).on('click', "input.btEdit", function () {
    var id = this.id;
    console.log(id);
});

This will log on the console: myButton1. As @Arun said you need to add the event dinamically, but in my case you don't need to call the parent first.

UPDATE

Though it would be better to say:

$(document).on('click', "input.btEdit", function () {
    var id = $(this).id;
    console.log(id);
});

Since this is JQuery's syntax, even though both will work.

edited Apr 04 '14 at 00:11

answered Feb 05 '14 at 21:48

j.rmz87

786
1
7
18

is it `this.id` or `$(this).attr("id")` ? – Coder Feb 06 '14 at 05:24
Hey @ShijuKBabu I tried $(this).attr("id") and I got an exception. But this worked well on Google Chrome, are you using a different browser where it's failing? – j.rmz87 Feb 06 '14 at 21:43
I didn't try. I already got the answer for what I wanted. This is for input button. I was just asking, because I am using `$(this).attr("id")` to get id of current object and it works for me – Coder Feb 07 '14 at 04:21

score 2 · Answer 5 · answered Jun 03 '13 at 08:58

on document ready event there is no a tag with class tabclick. so you have to bind click event dynamically when you are adding tabclick class. please this code:

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");

   $('#gentab a').addClass("tabclick")
    .click(function() {
          var liId = $(this).parent("li").attr("id");
         alert(liId);        
      });


 $('#gentab a').attr('href', '#datacollector');

});

score 2 · Answer 6 · answered Jul 22 '15 at 08:10

2

Here is the another solution as well, the bind method.

$(document).bind('click', ".intro", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

Cheers :)

answered Jul 22 '15 at 08:10

Ujjwal

519
1
5
17

score 1 · Answer 7 · answered Aug 16 '18 at 09:21

I Know this is an old topic...but none of the above helped me. And after searching a lot and trying everything...I came up with this.

First remove the click code out of the $(document).ready part and put it in a separate section. then put your click code in an $(function(){......}); code.

Like this:

<script>
  $(function(){
    //your click code
    $("a.tabclick").on('click',function() {
      //do something
    });
  });
</script>

jQuery click event not working after adding class

7 Answers7

Linked

Related