Add an onClick event to append()

问题:

I'm dynamically creating a div. I'd like to add a onClick() event to it.

How do I add an onClick as in

to this?

abc.append(     $('
', { class: 'something', id: 'btnHome' }) );  

EDIT:

I'm looking for an answer something like this

$('
', { class: 'something', id: 'btnHome' onClick: 'return true' }) 

回答1:

Event delegation is the right way to do it and @Tushar has the answer for you. But, if you were after something like this:

$('
', { class: 'something', id: 'btnHome' onClick: 'return true' }) 

Then, you may do:

$('
', {      '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.

$('
', {      'text': 'new',     'class': 'something',     'id': 'btnHome',     'click': function() { alert ("clicked") } }); 

回答2:

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

回答3:

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

文章来源: Add an onClick event to append()