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小提琴中做了改变：

JSFiddle

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

1 个答案: