1

首先，我不确定我的标题是否正确描述了问题......我进行了搜索，但没有找到任何帮助我的东西......

我正在做的项目有一个#orderList. 所有订单都有删除选项。订单被删除后，列表会更新。

听起来很简单......不过我遇到了一个问题。

/**
 * Data returned at the end of selecting some options
 */
$.post(myUrl, $('#myForm').serialize(), function(data) {
    // I build the orderlist
    // The data returned is a JSON object holding session data (including orders)
    buildOrderList(data);
    ...
    // Do some other work
});

/*
 * function to build the html list
 */
function buildOrderList(data) {
    // Empty list
    $('#orderList').empty();

    // The click handler for the delete button is in here because it needs the data object
    $(document).on('click', '[id^=delete_]', function() {
        // Get the orderId from the delete button
        var orderId = $(this).attr('id').split('_');
        orderId = orderId['1'];
        // I call the delete function
        deleteOrder(orderId, data);
    });

    var html = '';
    // Loop the data object
    $.each(data, function(key,val){
        ...
        // Put html code needed in var html
        ...
    });
    $('#orderList').append(html);
}

/*
 * function to delete an order
 */
function deleteOrder(orderId, data) {
    // Because of it depends on other 'products' in the list if the user can
    // simply delete it, I use a jQuery dialog to give him some options.
    // These options I send to a php script so it knows what should be deleted.
    // This fires when a user clicks on the 'delete' button from a dialog.
    // The dialog uses data to show options but does not change the value of data.
    switch(data.type) {
        case 'A':
            delMsg += '<p>Some message for case A</p>';
            delMsg += '<select>with some options for case A</select>';
            $('#wizard_dialog').append(delMsg);
            $('#wizard_dialog').dialog('option', 'buttons',  [ 
                { text: "Delete", click: function() { 
                        $.post(myUrl, $('#myDeleteOptions').serialize(), function(newData) {
                            // Now the returned data is the updated session data
                            // So I build the orderList again...
                            buildOrderList(newData);
                            ...
                            // Do some other work
                        });
                        $( this ).dialog( "close" );
                        $(this).html(''); }},
                { text: "Cancel", click: function() { $( this ).dialog("close"); $(this).html(''); }}
            ] );
            break;
        case 'B':
            // Do the same thing but different text and <select> elements
            break;
    }
}

更新正确，orderList但是如果我尝试删除另一个订单，jQuery 对话框会为我提供当前（正确产品）的选项以及之前拥有当前 id 的产品的选项。（希望我在试图解释问题时没有失去任何人）

主要问题是如何“刷新”发送到buildOrderList.

由于我在返回新数据对象的新 $.post 中调用该函数，它应该可以工作，不是吗？

/**
 * Enable the JQuery dialog
 * (#wizard_dialog)
     * this is the init (note that I only open the dialog in deleteOrder() and set text and buttons according to the data send to deleteOrder() )
 */
$('#wizard_dialog').dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    dialogClass: "no-close",
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Annuleren")').addClass('cancelButtonClass');
        $('.ui-dialog-buttonpane').find('button:contains("Verwijderen")').addClass('deleteButtonClass');
        $('.ui-dialog :button').blur(); // Because it is dangerous to put focus on 'OK' button
        $('.ui-widget-overlay').css('position', 'fixed'); // Fixing overlay (else in wrong position?)
        if ($(document).height() > $(window).height()) {
            var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
            $('html').addClass('noscroll').css('top',-scrollTop); // Prevent scroll without hiding the bar (thus preventing page to shift)
        }
    },
    close: function() {
        $('.ui-widget-overlay').css('position', 'absolute'); // Brake overlay again
        var scrollTop = parseInt($('html').css('top'));
        $('html').removeClass('noscroll'); // Allow scrolling again
        $('html,body').scrollTop(-scrollTop);
        $('#wizard_dialog').html('');
    }
});

编辑： 因为问题可能出在对话框中，所以我添加了一些代码。在第一个代码块中，我更改了 deleteOrder();

解答 解决方案相当简单。在添加新的单击处理程序之前，我忘记关闭单击处理程序。这将返回上一个事件和新事件。

$(document).off('click', '[id^=delete_]').on('click', '[id^=delete_]', function() {
        // Get the orderId from the delete button
        var orderId = $(this).attr('id').split('_');
        orderId = orderId['1'];
        // I call the delete function
        deleteOrder(orderId, data);
    });
4

0 回答 0