Question

Background

I have been using the JQuery UI plugin for creating a dialog that loads dynamic content.

So I load up an html document that displays a series of selectable items with checkboxes containing values: A, B, C, D, E

So let’s say I checked off “A, C, E”

I press a submit button, which makes use of an AJAX call to the server. The server takes in the data “A, C, E”, performs a series of queries and spits out data and html to hold the data contents. Like:

<input id="radio1" name="selGroup" type="radio" value="1"><p class="test"> 1 </p>
<input id="radio3" name="selGroup" type="radio" value="3"><p class="test"> 3 </p>
<input id="radio5" name="selGroup" type="radio" value="5"><p class="test"> 5 </p>
<input id="enterBttn" type="button" value="Submit">

This html content comes back to the client and get’s dumped into:

<div id="dialogCheck" title="Select one of these options"></div>

This is done by using the jQuery:

$("#dialogCheck").html(content);

Test

So I check to see if everything is working, and it does. I get a dialog box with my radio buttons and values that I want to select. But now I want to add some interactivity.

Problem

When I open up a dialog box with the injected html from the server, it shows the contents on the screen, but when I want to see the new html on the original source code. It doesn’t exist. It just shows up as:

 <div id="dialogCheck" title="Select one of these options"></div>

When I used JQuery’s “$(“#dialogCheck”).html(content);” to insert. I read the documentation, and it mentions how it doesn’t append html to the original source code. So My question is, how am I supposed to add JQuery scripts on top of the html that I inject?

The Wierd

If I pass in something that looks like this:

$("#enterBttn").click(function(){ 
     $( "#dialogCheck" ).dialog("destroy");
 });

It works! The enterBttn I created destroys the dialog box. However if I want to add hover functionality, like if I want to highlight text or outline divs on top of the dialog box, it won’t work because it doesn’t exist on the original source code.

$(".test").hover(
    function(){
        $(this).append($("<span> ***</span>"));
    },
    function(){
        $(this).find("span:last").remove();
});

Answer 1

One CAN use event handling on html elements inserted through AJAX.
The jquery ON() http://api.jquery.com/on/ function can be used for that purpose, or when an older version of jquery is used, use the LIVE() function.