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

这样，新元素也将触发处理程序。