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 : stackoverflow.com/questions/8110934/… — LeGEC
– LeGEC, Commented Jun 3, 2013 at 8:53

Arun P Johny · Accepted Answer · 2013-06-03 08:51:47Z

195

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 3, 2013 at 8:51

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eddie Over a year ago

This also works if the entire element is added after the code's execution, fantastic!

palaѕн · Accepted Answer · 2013-06-03 09:02:05Z

19

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.

answered Jun 3, 2013 at 9:02

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

PSR · Accepted Answer · 2013-06-03 08:58:21Z

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 3, 2013 at 8:58

answered Jun 3, 2013 at 8:52

PSR

40.4k43 gold badges115 silver badges154 bronze badges

Comments

j.rmz87 · Accepted Answer · 2014-04-04 00:11:05Z

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 4, 2014 at 0:11

answered Feb 5, 2014 at 21:48

j.rmz87

7911 gold badge7 silver badges18 bronze badges

3 Comments

Coder Over a year ago

is it this.id or $(this).attr("id") ?

j.rmz87 Over a year ago

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?

Coder Over a year ago

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

SP Singh · Accepted Answer · 2013-06-03 08:58:33Z

2

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

});

answered Jun 3, 2013 at 8:58

SP Singh

4364 silver badges18 bronze badges

Comments

Ujjwal · Accepted Answer · 2015-07-22 08:10:57Z

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, 2015 at 8:10

Ujjwal

5291 gold badge5 silver badges17 bronze badges

Comments

FD gi · Accepted Answer · 2018-08-16 09:21:56Z

1

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>

answered Aug 16, 2018 at 9:21

FD gi

436 bronze badges

Collectives™ on Stack Overflow

jQuery click event not working after adding class

7 Answers 7

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related