单击按钮时动态创建的 div 行为答案

【问题标题】：Dynamically created div behavior on button click单击按钮时动态创建的 div 行为
【发布时间】：2015-08-03 11:04:41
【问题描述】：

我浏览了 SO 的许多帖子，但无法与我的场景联系起来。

我在按钮单击时有此代码。用户可以通过它在运行时在 UI 上创建任意数量的 div。

$('#adddiv').click(function () {
    debugger;
    $('#main').append('<div class="ara-dynamic-div">
          <div class="box box-solid bg-light-blue-gradient">
          </Div></div>');
});

从该 div 获取 buttonclick 事件的代码

$(document).on('click', '#remove', function () {
    showMakeAndHold(this);
});


function showMakeAndHold(obj) {
    alert(obj);
    $('.ara-dynamic-div').fadeOut();
}

现在的问题是我必须创建多个动态 div。每个 div 都会有按钮来关闭自己。当我调用此函数时，它将关闭所有创建的 div，而不是单击哪个按钮。

我无法找到关闭请求的正确 div。我是 DOM 和 JQuery 的新手。不能把事情联系起来

【问题讨论】：

无需进一步了解，ID 是唯一的 - 每次创建新 DIV 时，您的代码都会添加相同的 div 和按钮 ID - 因此，如果您以 div ID 为目标，删除一个会将它们全部删除 - 也$(document).on('click', '#remove', function () { 触发时会触发相同的按钮 ID
@DarrenSweeney 嘿，但是如何克服它。当用户动态创建 10 个 div 时。那么我将如何区分它们中的每一个，然后才能关闭它。
查看 jquery 中的 closest() 或 parent()（如果结构始终相同） - 你给按钮和外部 div 一个 CLASS，而不是 ID，然后当单击该按钮类时你看对于具有新 div 类的最近 div 并将其删除
使用相同的 div ID 是不可能的。使类相同但保持 IDS 不同。使用每个新创建的 div 创建动态删除按钮并创建一个 onclick function removeElement("myDiv2") 这个按钮是针对 myDiv2 的。它随着每个 div 的变化而变化，因为所有 div 都有唯一的 id。

标签： javascript jquery html dom

【解决方案1】：

首先，如果你使用多个 div，你不应该给关闭按钮一个 ID，而是一个类（比如说，.close）

接下来你可以使用事件委托来找到正确的元素：

$(document).on('click', '.ara-dynamic-div .close', function( event ) {
    $(this).closest('.ara-dynamic-div').fadeOut();
} )

委托者处理任何.ara-dynamic-div .close 按钮中的所有点击事件，捕获所有事件并允许您使用$(this).closest(...) 访问父容器。

编辑：更正了一个错误

【讨论】：

这只会淡出按钮 - 使用类似$(this).closest('.ara-dynamic-div').hide();
@DarrenSweeney 是的，我刚刚意识到，在发布后片刻，不知道我在想什么；）编辑它。

【解决方案2】：

你可以使用jQuery的.closest()函数。

function showMakeAndHold(obj) {
    alert(obj);
    $(obj).closest('.ara-dynamic-div').fadeOut();
}

JSFiddle

【讨论】：

永远不要使用 alert 进行调试

【解决方案3】：

替换这个：

$(document).on('click', '#remove', function () {
    showMakeAndHold(this);
});

通过这个：

$(document).on('click', '#remove', function () {
    $(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function () {
        $(this).remove();
    });
});

Here is the JSFiddle demo

代码的作用是删除所有其他.ara-dynamic-div，除了单击按钮的那个。

【讨论】：