Event handler does not apply to created element?

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

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 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('hello world'); }); $('#hello').

Live('click',function() { $('#result'). Html('Test #2'); }); }); That said, an even easier method for the functionality you want is just to use hide() and show() on two already-existing divs.

1 when my daily vote count is reset. Provides more alternatives than my solution. – hobodave Jul 26 '09 at 22:09 Daniel, thanks for your answer.

Thanks for the 'live' function that you introduce to me. :) – squall15 Jul 26 '09 at 22:22.

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('hello world'); $('#hello'). Click(function() { $('#result').

Html('Test #2'); }); }); }).

Hobodave, I realize after I hit the submit button that this has nothing to do with Ajax. Hahaha. But, thank you for your advice and suggestion.

This is very helpful. – squall15 Jul 26 '09 at 22:21.

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('hello world'); $('#hello').

Click(function() { $('#result'). Html('Test #2'); // 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() { $('hello world') . Click(function() { $(this). ReplaceWith('Test #2') }) .

AppendTo('#result'); }); }).

Russ, your first code sample adds the click event to the '#result' element, not the '#hello' element. – Prestaul Jul 27 '09 at 3:44 @Prestaul - right you are. What's weird is that I expected the same outcome as what you have stated, but when I tested this with a div and a span, the click event handler was bound to the element added in the html content.

I can't seem to replicate that now, so will happily edit to correct. – Russ Cam Jul 27 '09 at 8:05.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions