jQuery对话框中的jQuery元素在ajax调用后停止工作

时间:2010-09-24 00:43:12

标签: javascript jquery ajax jquery-ui

<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调用,我也从中得到了正确的结果。< / p>

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

2 个答案:

答案 0 :(得分:3)

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

更新:从jQuery 1.7开始,.live()方法已弃用(从1.9开始不再存在!)。使用.on()附加事件处理程序。旧版jQuery的用户应使用.delegate()而不是.live()

答案 1 :(得分:1)

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

如果这些陈述中有任何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
});

这样,新元素也会触发处理程序。