Event handler does not apply to created element

Question

Well, the title may not make any sense at all.. But anyway, I ma put some easy codes to clarify it.

I am using JQuery 1.3.2

Here is my JS

$(document).ready(function() {
  $('#test').click(function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
  });

  $('#hello').click(function() {
    $('#result').html('<a href="#" id="asdf">Test #2</a>');
  });
});

In html, I have a hyperlink id='test' and a div with id='result'. What I expect this JS code to is when I click on test, it shows the "Hello World". After that, when I click the "Hello World", it supposed to show "Test #2"

Any suggestion is very helpful...

Thank you.

Answer 1

As hobodave says, this has nothing to do with Ajax.

The issue is that the click() functions are attached to the HTML when the document is loaded (on DOM ready). However, at that point the Hello world div doesn't exist yet. When it's created, it has no click event.

What you need is either to add the click() when the new div is added, or alternatively use the live() function to attach your event handlers.

$(document).ready(function() {
  $('#test').live('click',function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
  });

  $('#hello').live('click',function() {
    $('#result').html('<a href="#" id="asdf">Test #2</a>');
  });
});

That said, an even easier method for the functionality you want is just to use hide() and show() on two already-existing divs.

Answer 2

First, your question has nothing to do with AJAX. This is pure javascript. The onClick listeners you are defining above are bound to the appropriate elements on page load (specifically the DOM Ready event). When the page loads, there is no element with id="hello", thus it doesn't get the listener bound to it.

What you need to do is nest the listener binding for id="hello" inside the click event for id="result"

e.g.

$(document).ready(function() {
  $('#test').click(function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
    $('#hello').click(function() {
      $('#result').html('<a href="#" id="asdf">Test #2</a>');
    });
  });
});

Answer 3

It's because the click event handler for element with id="hello" that you set up in document ready does not get bound to the element as it does not exist in the DOM until the element with id="test" is clicked.

One way to resolve this would be to use event delegation and the live() command.

Another way would be to define the click event handler at the same time as adding the element to the DOM. The following will work fine in this scenario

$(function() {
  $('#test').click(function() {
    $('#result')
        .html('<a href="#" id="hello">hello world</a>');
        $('#hello').click(function() {
            $('#result').html('<a href="#" id="asdf">Test #2</a>');
            // to prevent event propagation
            return false;
        });
    // to prevent event propagation
    return false;    
    });      
});

There are specific jQuery commands for appending elements to other elements, the ones that would work well in this scenario are append() and appendTo(). This is an example using appendTo()

$(function() {
  $('#test').click(function() {

    $('<a href="#" id="hello">hello world</a>')
        .click(function() {
            $(this).replaceWith('<a href="#" id="asdf">Test #2</a>')
        })
        .appendTo('#result');
    });
});