Reputation: 5585
I'm dynamically creating a div. I'd like to add a onClick() event to it.
How do I add an onClick as in <div class="something" id="btnHome" onClick="return true">
to this?
abc.append(
$('<div />', { class: 'something', id: 'btnHome' })
);
EDIT:
I'm looking for an answer something like this
$('<div />', { class: 'something', id: 'btnHome' onClick: 'return true' })
Upvotes: 2
Views: 14046
Reputation: 87203
Use event delegation
:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
For dynamically added elements use parent to add event to the added elements.
$(staticParentSelector).on('click', '.something', function () {
// Event Handler Code here
});
You can also use document
, but this costs performance
$(document).on('click', '.something', function () {
// Event Handler Code here
});
see jQuery Docs for on
Upvotes: 10
Reputation: 8181
Event delegation is the right way to do it and @Tushar has the answer for you. But, if you were after something like this:
$('<div />', { class: 'something', id: 'btnHome' onClick: 'return true' })
Then, you may do:
$('<div/>', {
'text': 'new',
'class': 'something',
'id': 'btnHome'
}).on({
'click': function() { alert ("clicked") }
});
Demo@Fiddle
As squint suggests in one of the comments below, you could also use click
as an attribue just like text
or id
as the following.
$('<div/>', {
'text': 'new',
'class': 'something',
'id': 'btnHome',
'click': function() { alert ("clicked") }
});
Upvotes: 8
Reputation: 6673
You can use delegated events so add to your jquery code:
$(document).on('click','#btnhome',function(){'do something here'});
You can use document or any other parent element that is already in the DOM
Upvotes: 0