how to Register an Event of Dynamically created element in HTML using JQuery?

Question

I have added following table dynamically using Javascript:

    <table class="ActionMenu">
<tr>
<td>
<p>Ghanshyam</p>
</td>
</tr>
</table>

i want to get alert on Click of this table..

I tried:

$('body').on("click", ".ActionMenu tr", function (e) {
      alert("abcd");
 });

$('.ActionMenu ').on("click", "tr", function(){
   //do something
});

$('.ActionMenu').live('click',function(){});

$('#ActionTab').delegate('.someClass','click',function(){});

but none of the following Method work.. how can i achive my goal? Thanks

Perhaps a jsfiddle would be helpful in this case, if my answer doesn't help — Elias Van Ootegem
– Elias Van Ootegem, Commented May 16, 2012 at 10:59
the first .on statement should work fine. Maybe the problem is elsewhere — Fabrizio Calderan
– Fabrizio Calderan, Commented May 16, 2012 at 10:59
$('.ActionMenu').live('click',function(){}); works: jsfiddle.net/QMNcc. Maybe you could reproduce your bug in a JsFiddle — My Head Hurts
– My Head Hurts, Commented May 16, 2012 at 11:01
@EliasVanOotegem I think you mean depricated - it still works and can still be used. In JQuery 1.7 the live method just calls the on method itself (making it backward compatable). There is no mention of the version of JQuery being used, which could be why on is not working. — My Head Hurts
– My Head Hurts, Commented May 16, 2012 at 11:18

Kanishka Panamaldeniya · Accepted Answer · 2012-05-16 11:09:40Z

2

are you enclosed your code in $(document).ready() block ? if not then try to enclose inside document.ready function

$(function(){
$('body').on("click", ".ActionMenu tr", function (e) {
      alert("abcd");
 });

$('.ActionMenu ').on("click", "tr", function(){
   //do something
});

$('.ActionMenu').live('click',function(){});

$('#ActionTab').delegate('.someClass','click',function(){});
});

edited May 16, 2012 at 11:09

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

answered May 16, 2012 at 11:02

Ravi Gadag

15.9k5 gold badges60 silver badges85 bronze badges

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

Comments

Elias Van Ootegem · Accepted Answer · 2012-05-16 11:31:12Z

1

Your selectors are a tad off, at first glance, try:

$('table.ActionMenu tr').on('click',callback);

Since this isn't working: a couple of things have been suggested:

What version of jQuery are you using, on might not be working if you're on an old version
have you tried $(body).on('click', '.ActionMenu tr', function() { alert('clicked'); });? Replacing .on with .live if needed.
A classic problem, but easily forgotten: have you checked for typo's in either class names, id's... on both sides (server & jQuery)? --You never know
Is all code wrapped in a $(document).ready(function(){/*script goes here...*/});
Check you console for possible syntax errors or other messages

edited May 16, 2012 at 11:31

answered May 16, 2012 at 10:58

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

4 Comments

Fabrizio Calderan Over a year ago

but this won't work on tables injected later via ajax/javascript

Elias Van Ootegem Over a year ago

Yes, it will... .on is incorporates the same functionality as .live, so the event handler will be bound to all dynamically generated elements, too

ghanshyam.mirani Over a year ago

Thanks for you answer but where can i put my Content Code in your above method?

Elias Van Ootegem Over a year ago

the callback can be any function reference, either previously declared, but feel free to replace that with function(){alert($(this).html());} or whatever you need

moribvndvs · Accepted Answer · 2012-05-16 11:02:55Z

1

$(document.body).on('click', '.ActionMenu tr', function() { alert('clicked'); });

See http://jsfiddle.net/MWvMH/1/

answered May 16, 2012 at 11:02

moribvndvs

42.5k12 gold badges138 silver badges152 bronze badges

Collectives™ on Stack Overflow

how to Register an Event of Dynamically created element in HTML using JQuery?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related