javascript - 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 调用，并且我也会从中得到正确的结果。

我的第一个悬停和点击效果很好，但在我更新数据并获得结果后，悬停停止工作，箭头上的点击事件也停止工作。我认为这是因为我在点击事件函数中呈现数据，但我不知道如何解决它。

Answer 1

如果您要返回 HTML 并且您希望在新返回的 html 中的元素上发生点击事件和悬停事件，那么您需要使用 .live() jQuery 关键字。

更新:自 jQuery 1.7 起，.live() 方法已弃用(从 1.9 开始不再存在!)。使用 .on()附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate()优先于 .live()。