jQuery elements inside a jQuery dialog stop working after ajax call

Question

<div id="divItems"><div id="divItemsContent"></div></div>

I think i know what the problem is, just don't know how to solve it. Here is the code:

function SplitOrder() {
    var SplitTable = $.ajax({
        url: 'AjaxActions/SplitTable.aspx?FromObjectID=' + $('#hidObjectID').val() + '&ToObjectID=' + ObjectID[1],
        async: false
    }).responseText;

    var dialog = $('#divItems').dialog({
        autoOpen: false,
        height: 500,
        width: 600,
        title: 'פיצול שולחן'
    });

    var content = $("#divItemsContent");
    content.html("");
    content.html(SplitTable);
    dialog.dialog("open");
    //הפעולות על החשבונות
    /************************************************/

    $('#imgLeftArrow').click(

    function() {

        $(this).css("background-color", "white");


        //AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
        var SplitTable = $.ajax({
            url: 'AjaxActions/SplitUpdate.aspx?FromObjectID=' + $('#hidObjectID').val() + '&ToObjectID=' + ObjectID[1] + '&ItemID=' + $('#hidItemID').val() + '&ItemAmount=' + $('#hidItemAmount').val(),
            async: false
        }).responseText;

        content.html("");
        content.html(SplitTable);
    });


    $('#imgRightArrow').click(

    function() {
        //AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
        var SplitUpdate = $.ajax({
            url: 'AjaxActions/SplitUpdate.aspx?FromObjectID=' + $('#hidObjectID').val() + '&ToObjectID=' + ObjectID[1] + '&ItemID=' + $('#hidItemID').val() + '&ItemAmount=' + $('#hidItemAmountTo').val(),
            async: false
        }).responseText;
    });

    /************************************************/

    $('div[id^="Item_"]').hover(

    function(e) {
        $(this).css("cursor", "pointer");
        $(this).css("background-color", "blue");
    },

    //כשיוצאים מהשולחן DIVהעלמת ה


    function() {
        $(this).css("background-color", "white");
    });

    /************************************************/

    //טיפול בבחירת פריט להוספה/הורדה מהחשבון
    $('div[id^="Item_"]').click(

    function() {
        $('#imgLeftArrow').css("background-color", "yellow");

        //הוספת הפריט לשדה הנסתר
        $('#hidItemID').val($(this).children().html());
        $('#hidItemName').val($(this).children().next().html());
        $('#hidItemAmount').val($(this).children().next().next().html());

    });
}​

I am trying to display one page using the ajax call and put the result in the dialog...This is working great!!!

Next, if someone choses an item and press the left arrow pic, I am doing another ajax call that updates the database and returns the new HTML (using XML/SXL) and I am getting the right result from that also.

I am getting the first hover and click working great, but after I'm updating the data and getting the result the hover stops working and also the click event on the arrow. I think it is because i'm rendering the data inside the click event function but I don't know how to solve it.

Answer 1

If you are returning HTML and you expect to have click events and hover events happen on elements within the new returned html then you need to use the .live() jQuery keyword.

Update: As of jQuery 1.7, the .live() method is deprecated (and no longer exists starting in 1.9!). Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live() .

Answer 2

I think I understand what you're trying to do...

If any of the HTML is in these statements:

$('#hidItemID').val($(this).children().html());
$('#hidItemName').val($(this).children().next().html());
$('#hidItemAmount').val($(this).children().next().next().html());

Contains jQuery, it will be rendered as plain HTML because they are being added to the DOM after event binding. What Griegs suggested willwork.

You'll need something similar to:

$('div[id^="Item_"]').live('hover', function(event) {
    // do something on hover
});

$('#imgLeftArrow').live('click', function(event) {
    // do something on click
});

$('#imgRightArrow').live('click', function(event) {
    // do something on click
});

This way new elements will also trigger the handlers.