11/9/2014

javascript - In jQuery, how to attach events to dynamic html elements? - Stack Overflow
sign up

log in

tour

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.

help

stack overflow careers

Take the 2-minute tour

In jQuery, how to attach events to dynamic html elements? [duplicate]

This question already has an answer here:

Event binding on dynamically created elements? 10 answers
Suppose I have some jQuery code that attaches an event handler to all elements with class "myclass".
For example:
$(function(){
$(".myclass").click( function() {
// do something
});
});
And my html might be as follows:
<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>
That works with no problem. However, consider if the "myclass" elements were written to the page at
some future time.
For example:
<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
$("#anchor1").click( function() {
$("#anchor1").append('<a class="myclass" href="#">test4</a>');
});
});
</script>
In this case, the "test4" link is created when a user clicks on a#anchor1.
The "test4" link does not have the click() handler associated with it, even though it has class="myclass".
Any idea how I can fix this?
Basically, I would like to write the click() handler once and have it apply to both content present at page
load, and content brought in later via Ajax/DHTML.
javascript

jquery

events

dhtml

asked Aug 31 '09 at 19:29

frankadelic
4,598 16 77 134

marked as duplicate by Peter O., Pinal, Jan Krger, m59, Alex Sep 8 at
13:58
This question has been asked before and already has an answer. If those answers do not fully address your
question, please ask a new question.
add a comment

9 Answers
I am adding a new answer to reflect changes in later jQuery releases. The .live() method is deprecated
as of jQuery 1.7.
From http://api.jquery.com/live/

http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements?rq=1

1/4

11/9/2014

javascript - In jQuery, how to attach events to dynamic html elements? - Stack Overflow
From http://api.jquery.com/live/
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older
versions of jQuery should use .delegate() in preference to .live().
For jQuery 1.7+ you can attach an event handler to a parent element using .on(), and pass the a
selector combined with 'myclass' as an argument.
See http://api.jquery.com/on/
So instead of...
$(".myclass").click( function() {
// do something
});
You can write...
$('body').on('click', 'a.myclass', function() {
// do something
});
This will work for all a tags with 'myclass' in the body, whether already present or dynamically added
later.
The body tag is used here as the example had no closer static surrounding tag, but any parent tag that
exists when the .on method call occurs will work. For instance a ul tag for a list which will have dynamic
elements added would look like this:
$('ul').on('click', 'li', function() {
alert( $(this).text() );
});
As long as the ul tag exists this will work (no li elements need exist yet).
edited Jul 8 at 12:36
Chuck
10.3k 17 72 139

answered Feb 17 '12 at 15:37

Sean
3,566 1 12 24

Thank you, saved me for an headache because i didn't succeed in let it work. Thank you so much
Mathlight Dec 18 '12 at 13:17

Brilliant solution, thx alot! user1466291 Feb 28 '13 at 11:35

This otherwise brilliant solution seems to have a problem with HTML content living in a Fancybox. I've
reverted to creating the handlers for that manually. I didn't try iFrame Content yet, so the content of the
fanyxbos is part of the body or in my case of the document variable. user673046 Aug 11 '13 at 19:49

live() is deprecated and .on() came. But it is not clear that when I write $('selector').on('event',
callback(){}) then it wont work. Need to write desired selector inside on(). $(document).on('event',
'selector', callback(){}) or, $('body').on('event', 'selector', callback(){})
Satya Prakash Dec 21 '13 at 14:36
what about performance? is it the same as attaching events directly? Juan Apr 29 at 19:38

show 1 more comment

After jQuery 1.7 the preferred methods are .on() and .off()
Sean's answer shows an example.

Now Deprecated:
Use the jQuery functions .live() and .die(). Available in jQuery 1.3.x
From the docs:
To display each paragraph's text in an alert box whenever it is clicked:
$("p").live("click", function(){
alert( $(this).text() );
});
Also, the livequery plugin does this and has support for more events.
edited Feb 20 '12 at 5:13

answered Aug 31 '09 at 19:30

Matt Brunell

http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements?rq=1

2/4

11/9/2014

javascript - In jQuery, how to attach events to dynamic html elements? - Stack Overflow
Matt Brunell
7,273 21 36

What if my selector needs to be the parent of some other element? For example:
$("p").parent(".myclass").live("click", ... This doesn't seem to work with live(). frankadelic Aug 31 '09 at
21:58
You could try to incorporate that into a single query like $("p:has(.myclass)").live("click",...). Note: there are
some cases where live doesn't work for all events. Check out livequery plugin for support not offered by live.
Matt Brunell Sep 1 '09 at 1:41
That worked - thanks! frankadelic Sep 1 '09 at 2:52

This is no longer the correct Answer. The .live() method is deprecated as of jQuery 1.7. Use .on() instead.
Lets get the correct answer[stackoverflow.com/a/9331127/363701] some upvotes. Or @Matt - do you want to
update your answer? Zach L Feb 17 '12 at 15:47
@ZachL Thanks, updated. Matt Brunell Feb 20 '12 at 5:14

add a comment

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind
custom events.
link text
$(function(){
$(".myclass").live("click", function() {
// do something
});
});
answered Aug 31 '09 at 19:32
andres descalzo
8,637 4 32 59
live is deprecated. Francisco Corrales Morales May 12 at 22:41
add a comment

If you're adding a pile of anchors to the DOM, look into event delegation instead.
Here's a simple example:
$('#somecontainer').click(function(e) {
var $target = $(e.target);
if ($target.hasClass("myclass")) {
// do something
}
});
edited Jan 19 '13 at 18:05

answered Aug 31 '09 at 19:39

ScottE
12k 10 59 104

add a comment

Sometimes doing this (the top-voted answer) is not always enough:

$('body').on('click', 'a.myclass', function() {
// do something
});
This can be an issue because of the order event handlers are fired. If you find yourself doing this, but it
is causing issues because of the order in which it is handled.. You can always wrap that into a function,
that when called "refreshes" the listener.
For example:
function RefreshSomeEventListener() {
$("#wrapper .specific-selector").on("click", function() {
// Handle event.
}
}
Because it is a function, whenever I set up my listener this way, I typically call it on document ready:
$(document).ready(function() {
// Other ready commands / code
// Call our function to setup initial listening
RefreshSomeEventListener();
});
Then, whenever you add some dynamically added element, call that method again:

http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements?rq=1

3/4

11/9/2014

javascript - In jQuery, how to attach events to dynamic html elements? - Stack Overflow
function SomeMethodThatAddsElement() {
// Some code / AJAX / whatever.. Adding element dynamically
// Refresh our listener, so the new element is taken into account
RefreshSomeEventListener();
}
Hopefully this helps!
Regards,
answered Jul 15 at 20:28
Chandler Zwolle
61 1
add a comment

If your on jQuery 1.3+ then use .live()

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind
custom events.
answered Aug 31 '09 at 19:31
redsquare
49k 11 118 138
add a comment

Use jQuery's .live function.

answered Aug 31 '09 at 19:31
karbassi
130 1 3 11
add a comment

You want to use the live() function. See the docs.

For example:
$("#anchor1").live("click", function() {
$("#anchor1").append('<a class="myclass" href="#">test4</a>');
});
answered Aug 31 '09 at 19:31
Adam Bellaire
44.9k 15 112 147
add a comment

You can bind a single click event to a page for all elements, no matter if they are already on that page or
if they will arrive at some future time, like that:
$(document).bind('click', function (e) {
var target = $(e.target);
if (target.is('.myclass')) {
e.preventDefault(); // if you want to cancel the event flow
// do something
} else if (target.is('.myotherclass')) {
e.preventDefault();
// do something else
}
});
Been using it for a while. Works like a charm.
In jQuery 1.7 and later, it is recommended to use .on() in place of bind or any other event delegation
method, but .bind() still works.
edited Apr 29 '13 at 15:15

answered Mar 29 '13 at 3:09

i-1,096 6 18

add a comment

Not the answer you're looking for? Browse other questions tagged javascript jquery
events

dhtml or ask your own question.

http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements?rq=1

4/4