1

我们试图实现的功能的简短描述：我们在左侧有一个源对象列表，一个人可以将新项目从列表中拖动到右侧的列表中，从而将项目添加到右侧的列表中; 他们还可以从右侧的列表中删除项目。右侧的列表会在每次更改时保存。（我认为保存方式/保存位置的细节并不重要......）

我在 JavaScript 与 DOM 元素领域的时间有点问题。可以删除右侧列表中已存在的项目。我们有一些代码会在 DOM 元素上的“删除/删除”类型图标/按钮上触发，这应该可以从 DOM 中直观地永久删除元素（即不需要通过“显示”将其带回'）。当 JS 遍历 DOM 树以构建新的更新列表时，这种视觉变化也应该显示在构建的 JSON 对象中。

但是，在调用此 .remove() 之后立即运行的这段 JS 代码，应该刚刚删除的元素仍然显示在 JSON 对象中。情况不妙。

以下是我认为在这里运行的相关代码位。这存在于网络浏览器中；其中大部分都在 document.ready() 函数中。给定列表也可以有子部分，因此子列表部分和循环。

点击定义：

$('body').on('click', '.removeLine', function() {
var parent=$(this).parent().parent().parent();     //The button is a few DIVs shy of the outer container
var List=$(this).closest('article');     //Another parent object, containing all the 
parent.fadeOut( 300, 
    function() {
        parent.slideUp(300);
        parent.remove(); 
    }
);
sendList(List);    //  This builds and stores the list based on the DOM elements
});

稍后，这个函数定义：

function sendList(List) {
var ListArray=[], 
    subListArray=[], 
    itemsArray = [], 
    subListName = "";
var ListTitle = encodeText(List.find('.title').html());

            // loop through the subLists
List.find('.subList').each(
        function(index, element) {
            subListName=($(this).find('header > .title').html());  // Get sublist Title
            subListID=($(this).attr('id'));               // Get subList ID

            // loop through the line items
            itemsArray=[];
            $(this).find('.itemSearchResult').each(
                function(index, element) {
                            //  Build item Array
                    if( $(this).attr('data-itemid')!= item ) {
                        itemArray.push( $(this).attr('data-itemid'));
                    }
                }
            );

             // Build SubList Array with items Array
            subListArray.push(
                    {
                        "subListName": subListName,
                        "subListID" : subListID,
                        "items" : itemsArray
                    }
            );
        }
); <!-- end SubList Loop -->

// Complete List Array with subListArray
ListArray ={
"ListName": ListTitle,
"ListID": List.attr('id'),
"subLists": subListArray
};
        // Send New List to DataLists Object - the local version of storage
updateDataLists(ListArray);
        // Update remote storage
window.location= URLstring + "&$Type=List" + "&$JSON=" + JSON.stringify(ListArray) + "&$objectID=" + ListArray.ListID;

};

这似乎是“parent.remove()”步骤的交互，然后是对“sendList()”的调用，使他们的电线交叉。视觉上，屏幕上的对象看起来是正确的，但如果我们检查发送到存储的数据，它会通过视觉上删除的对象。

谢谢，J

PS。您可能会说，我们是 Javascript 方面的新手，所以我们的代码可能不是非常有效或正确。但是......它的工作原理！（好吧，除了这个问题。我们已经遇到过几次这个问题。我们有一个解决方法，但我宁愿了解这里发生了什么。了解 JS 的更深层次的工作原理，所以我们不创建这些首先是问题。）

4

1 回答 1

4

这里发生了一些事情，但我将从异步编程的角度来解释它。

您在元素从 DOM 中删除sendList 之前调用。fadeOut在您的回调被执行（需要 300 毫秒）之后，您的元素才会从 DOM 中删除。

您的sendList函数在您开始后立即被调用fadeOut，但您的程序不会等到sendList您fadeOut完成后才调用 - 这就是回调的用途。

sendList因此，在您的 DOM 元素被删除后，我会通过调用回调来处理它，如下所示：

$('body').on('click', '.removeLine', function() {
    var el = $(this); //maintain a reference to $(this) to use in the callback
    var parent=$(this).parent().parent().parent();     //The button is a few DIVs shy of the outer container
    parent.fadeOut( 300, 
        function() {
            parent.slideUp(300);
            parent.remove(); 
            sendList(el.closest('article'));
       }
    );
});
于 2013-10-19T21:41:36.690 回答