JQuery 追加然后删除

Question

Fiddle：http://jsfiddle.net/YbfZG/4/ 出于某种原因，toggleDiv/removeDiv 函数不起作用（我没有经常使用 jsfiddle），但希望这能让您更好地了解我想要完成的工作。

我有一个页面，用户可以通过从下拉列表中进行选择来动态添加项目（div）。这是通过 .append() 完成的。他们还可以删除一个项目 (.remove()) 并可能重新添加它。每个 div 都包含一个通过单击链接触发的隐藏/显示区域。

第一次将 div 添加到页面时，隐藏/显示区域可以正常工作。如果相同的 div 被删除然后重新添加，则隐藏/显示不再起作用。我相信这是因为 div 没有完全从 DOM 中删除，因此基于 id 操作的隐藏/显示功能无法找到正确的 div 来处理。

我尝试将删除函数修改为 $(this).empty().remove();但这没有用。我也尝试过使用分离，但功能没有变化。我做了一些阅读，我可能需要使用 .on()，但我不确定如何构建它。

ETA：附加和切换代码并将 div 名称更改为不仅仅是数字（我的错字）。

Answer 1

如果您将标记更改为：

<div id="8" class="wrapper">
    <div>
    <a title="Remove" class="remove" href="#">Remove</a>
    </div>
</div>

（基本上我在主 div 中添加了一个“包装”类，在删除链接中添加了一个“删除”类）

因此，您将摆脱 onclick 属性并改用一个简单的函数：

$('body').on('click','a.remove',function(){
    $(this).closest('div.wrapper').remove();
});​

Demo

---

鉴于您的完整代码，以下是如何使其工作 (demo)：

$(function() {

    $('.elements').on('click', '.remove', function() {
        $(this).closest('div[id^=div]').remove();
    });

    $('.elements').on('click', '.open-close', function() {
        var hideShowN = $(this).closest('div[id^=div]').attr('id').replace(/\D/g,'');
        $('#hide_show_'+hideShowN).toggle();
    });

    $('.add').on('click', function() {
        $('.elements').append('<div id="div_8">Element<a class="open-close" href="#" title="Open/Close">Open/Close</a><div id="hide_show_8" style="display: none;">Stuff</div><a class="remove" href="#" title="Remove">Remove</a></div>');
    });

});​

Answer 2

我之前也遇到过类似的问题。我相信这是由同一件事引起的。问题是您在删除/读取 div 时需要重新绑定单击处理程序。我所做的是创建一个绑定处理程序的函数，并在出现这种情况时调用它，即从 DOM 中添加/删除元素。

祝你好运

Answer 3

使用 .detach 而不是 remove 来保留事件绑定。从文档中引用。

.detach() 方法与 .remove() 相同，除了 .detach() 保留所有与已移除元素关联的 jQuery 数据。这 当移除的元素要重新插入到 DOM 稍后。

Answer 4

我会建议你在使用 jQuery 时使用监听器，它更干净而且通常更容易。

我用我认为你需要的东西做了一个 jsfiddle。在这里查看：http://jsfiddle.net/YbfZG/2/。

在此示例中重要的是，删除元素的侦听器正在侦听“元素”div，而不是删除按钮。当监听器被触发时，它会检查点击是否在“.element .remove”内，如果是，则执行该函数。

这很重要，因为如果您将侦听器直接放在“.element .remove”上，则通过“添加”按钮新添加的类将失败，因为它们是在 jQuery 附加侦听器之后添加的。