3

小提琴： http: //jsfiddle.net/YbfZG/4/出于某种原因，toggleDiv/removeDiv 函数无法正常工作（我没有经常使用 jsfiddle），但希望这能让您更好地了解我是什么试图完成。

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

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

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

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

4

4 回答 4

3

如果您将标记更改为：

<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();
});​

演示

鉴于您的完整代码，以下是如何使其工作（演示）：

$(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>');
    });

});​
于 2012-10-16T14:16:09.430 回答
1

我建议您在使用 jQuery 时使用侦听器，它更清洁且通常更容易。

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

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

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

于 2012-10-16T14:30:13.540 回答
0

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

祝你好运

于 2012-10-16T14:17:44.623 回答
0

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

.detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 保留与已删除元素关联的所有 jQuery 数据。当移除的元素稍后要重新插入到 DOM 中时，此方法很有用。

于 2012-10-16T14:19:01.410 回答