如何将数据从元素传输到委托事件？

Question

我想从委托 onclick 事件处理程序中检索元素数据，并让它工作，但突然我遇到了一些问题。

最后我隔离了这个问题：似乎附加到元素的数据 当元素从 DOM 中移除时被删除。这可能会发生 在调用委托 onclick 事件处理程序之前。

因为有时我会有一个 click 事件处理程序，它会在委托处理程序运行之前删除元素。

考虑这个文件：

<div id='content'>
    <a href="#pp" class='remove'>Will be removed ( data is lost )</a>
    <a href="#pp">Will stay ( works )</a>
</div>

还有这个 javascript：

$(document).ready(function () {
    $('a').data("keep", {
        content: 'want to see at delegate click envent'
    });
    $('a').click(function () {
        var data = $(this).data("keep"),
            data_to_show = data ? JSON.stringify(data) : 'Real Gone!!';
        alert("click: " + data_to_show);
        if ($(this).hasClass('remove')) {
            $(this).remove();
        }
    });
    $('#content').delegate('a', 'click', function (event) {
        var data = $(this).data("keep"),
            data_to_show = data ? JSON.stringify(data) : 'Real Gone!!';
        alert("delegate: " + data_to_show);
    });
});

您可以在以下位置玩它：http://jsfiddle.net/s47c5/4/

我可以推迟删除元素，将其包装成超时...

    if ($(this).hasClass('remove')) {
        setTimeout ( function () { 
            $(this).remove()
        }, 10 );
    }

它有效，但不知何故这让我毛骨悚然！

所以问题是：

我怎样才能正确地从要删除的项目中传输数据，以便它到达委托的事件处理程序？

Answer 1

你应该试试这个代码：

$(document).ready(function () {
    $('a').data("keep", {
        content: 'want to see at delegate click envent'
    });
    $('a').click(function () {
        var data = $(this).data("keep"),
            data_to_show = data ? JSON.stringify(data) : 'Real Gone!!';
        alert("click: " + data_to_show);

    });
    $('#content').delegate('a', 'click', function (event) {
        var data = $(this).data("keep"),
        data_to_show = data ? JSON.stringify(data) : 'Real Gone!!';
        alert("delegate: Before removing >" + data_to_show);
        if ($(this).hasClass('remove')) {
            $(this).remove();            
        }
        //After removing 
        data = $(this).data("keep");
        data_to_show = data ? JSON.stringify(data) : 'Real Gone!!';
        alert("delegate: After removing >" + data_to_show);
    });
});

看到我在 JS fiddle 中做了一些改动：

JSFiddle