jQuery對話框中的jQuery元素在ajax調用后停止工作

Question

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

我想我知道問題是什么，只是不知道如何解決它。 這是代碼：

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());

    });
}​

我試圖使用ajax調用顯示一個頁面並將結果放在對話框中......這很有效！

接下來，如果某人選擇了一個項目並按下左箭頭圖片，我正在進行另一個更新數據庫並返回新HTML（使用XML / SXL）的ajax調用，我也從中獲得了正確的結果。

我正在獲得第一個懸停並單擊工作很好，但在我更新數據並獲得結果后，懸停停止工作以及箭頭上的單擊事件。 我認為這是因為我在click事件函數中呈現數據，但我不知道如何解決它。

Answer 1

如果要返回HTML並且您希望在新返回的html中的元素上發生單擊事件和懸停事件，則需要使用.live（） jQuery關鍵字。

更新：從jQuery 1.7開始，不推薦使用.live()方法（從1.9開始不再存在！）。 使用.on()附加事件處理程序。 舊版jQuery的用戶應該使用.delegate()而不是.live() 。

Answer 2

我想我明白你要做什么......

如果這些語句中包含任何HTML：

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

包含jQuery，它將呈現為純HTML，因為它們在事件綁定后被添加到DOM中。 格里格斯建議做什么。

你需要類似的東西：

$('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
});

這樣，新元素也將觸發處理程序。