Question

小提琴：http://jsfiddle.net/YbfZG/4/由于某种原因，toggleDiv / removeDiv功能不起作用（我还没有使用过jsfiddle），但希望这会让你更好地了解我所做的事情。 ;我试图完成。

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

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

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

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

Answer 1

如果将标记更改为：

，将会更容易

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

（基本上我在主div中添加了一个“wrapper”类，在remove链接中添加了一个“remove”类）

所以你将摆脱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

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

我已经根据自己的需要制作了一个jsfiddle。请在此处查看：http://jsfiddle.net/YbfZG/2/。

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

这很重要，因为如果你将监听器直接放在“.element .remove”上，那么通过“添加”按钮对于新添加的类将失败，因为它们是在jQuery追加监听器之后添加的。

Answer 3

我之前遇到过类似的问题。我相信它是由同样的事情造成的。问题是你需要在删除/读取div时重新绑定点击处理程序。我所做的是创建一个绑定处理程序的函数，每当出现这样的情况时，我就会调用它，从DOM中添加/删除元素。

祝你好运

Answer 4

使用.detach而不是删除来保留事件绑定。引用文档。

.detach（）方法与.remove（）相同，但.detach（）除外保持所有jQuery数据与删除的元素相关联。这个当要删除的元素要重新插入时，方法很有用以后的DOM。

JQuery追加然后删除

4 个答案: