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

Answers:

Answer

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") }
});

[email protected]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") }
});
Answer

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

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.