How does DOM detect an existing element?

Question

$('#test').click(function () {
  $('body').append($('<button>').prop('id', 'demo').text('Click me'))
});

$('#demo').click(function () {
  alert('Hello world!')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Append</button>

I've checked in Console log, no error was found. I think something may be: Element with id demo does not exist, so no message would throw when clicking on it.

Is there any way to set new element (created by jQuery syntax) detects the event (onclick)?

I don't want to use this way:

var btnClick = function () {
  alert('Hello world!')
};

$('#test').click(function () {
  $('body').append($('<button>').prop('id', 'demo')
                                .attr('onclick', 'btnClick()').text('Click me'))
});

The id is the same for all the new buttons, ids must be unique. Use class instead. — nestedl00p, Dec 24 '15 at 19:05
@Ness Rosales is right. Also, you can use the [`jQuery.on`](http://api.jquery.com/on/) method to attach a click handler to all your buttons — nem035, Dec 24 '15 at 19:06
Why don't you want to use the way that you say you don't want to use? — Maximillian Laumeister, Dec 24 '15 at 20:28

Zakaria Acharki · Accepted Answer · 2015-12-24T19:22:57.757

2

You should use event delegation on() :

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.

$('body').on('click', '#demo', function () {
     alert('Hello world!')
})

Hope this helps.

edited Dec 24 '15 at 19:22

answered Dec 24 '15 at 19:09

Zakaria Acharki

63,488
15
64
88

How does DOM detect an existing element?

1 Answers1