Question

Say I have this code in my page:

<script language="javascript">
 $(document).ready(function() {
  $(".test").click(function() {
   alert('Hello');
  });
 });
</script>

Why doesn’t the previous code apply to elements with the class “test” which I add later to the document like this for example:

$('body').append('<p class="test">Test</p>');

Because what happens is that when I click the previous <p> tag nothing happens.

Also, if I have this:

<div id="first">Edit me.<div id="second">Save me.</div></div>

Can I do what the text describes? that is, controlling the content of the #first div without affecting the content of the #second div?

Thank you.

Answer 1

The problem is that .click() does only apply a listener for elements that are available in the DOM when the method is executed. You should take a look at .on() instead.

With .on() you can delegate the event, like this for instance:

$("body").on("click", ".test", function() {
   alert('Hello');
});

Now any element (current and future) with the class test available within your body will have a click-event listener.