【问题标题】：How to bind a function without particular event to dynamically added elements?如何将没有特定事件的函数绑定到动态添加的元素？
【发布时间】：2014-11-04 07:13:56
【问题描述】：

因此，例如，我有一个函数可以查找所有具有 "my-box" 类的元素，并在 .ready() 上添加具有 "another-box" 类的元素，并且一切正常。问题是，如何在动态添加的"my-box" 元素上激活此功能？我知道如果我有点击事件或类似事件，我可以使用.on()，但我没有绑定任何默认事件，所以我不知道在这种情况下如何使用.on() ...

【问题讨论】：

你可以试试on('ready',...)
我不确定 .ready() 是否会在动态添加某些元素后触发，但我会尝试一下，谢谢
Ready() 仅在 Document 就绪时触发一次。
创建此元素时，只需使用一些回调函数即可。只需要为这个元素申请another-box，因为其他所有元素都已经有了它

标签： javascript jquery html ajax

【解决方案1】：

你有两种方法：

您将回调绑定到触发框插入的事件。（比如点击“addBox”按钮或其他东西）
您观察框的父级中的 DOM 更改

不过，我会选择 1，因为监视 DOM 更改的成本很高

示例

示例 1：

在同一个回调中同时添加两个盒子

//event that creates My-Boxes
$('#btn').on('click', function () {
    // In here we add the 2 boxes simultaneously
    $('<div class="my-box">My Box</div>')
    .append('<div class="another-box">Another box</div>')
    .appendTo('#parent');
});

.my-box {
    background-color: yellow;
    border: 2px solid black;
}

.another-box {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
</div>
<br>
<button id="btn">Add My-Box</button>
<br>

示例 2：

使用 DOM 观察器...

$('#btn').on('click', function () {
    $('<div class="my-box">My Box</div>').appendTo('#parent');
});

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var obsConfig = { childList: true, characterData: false, attributes: false, subtree: true};
var parentObserver = new MutationObserver( function (mRecords) {
    
    mRecords.forEach ( function (mutation) {
        if (mutation.addedNodes.length > 0) {
            for (var i=0; i < mutation.addedNodes.length; ++i) {
                if ($(mutation.addedNodes[i]).hasClass('my-box')) {
                    $(mutation.addedNodes[i]).append('<div class="another-box">Another Box</div>');
                }
            }
        }
    });
});

parentObserver.observe($('#parent')[0], obsConfig);

.my-box {
  background-color: yellow;
  border: 2px solid black;
}
.another-box {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="parent"></div>
<button id="btn">Add Box</button>

【讨论】：

@RayonDabre Mutation Observers
您能否再描述一下您提到的第一种方法，好吗？我不确定我明白你的意思
@RayonDabre，你的意思是如果新元素是用ajax添加的，我应该在ajax成功回调中手动触发插入函数？
@JustMichael 或者只是将一个新的成功处理程序附加到 ajax 调用。

【解决方案2】：

听起来你会想要绑定到文档的就绪事件。这将等到文档加载完毕，并且在文档从服务器完全返回后允许您的代码运行。

使用自执行匿名函数的最简单方法（而不是使用像 jQuery 这样的库）：

<html>
<head>
</head>
<body>
Your HTML here

<script>
(function() {
   // the document will be loaded here

})();
</script>
</body>
</html>

【讨论】：

它已绑定到 .ready() 事件，但如果在事件触发时元素不存在则它不起作用，因为它将在稍后动态添加，在 .ready() 被触发后跨度>
那么你需要绑定ready事件来动态加载元素。
我该怎么做？ .on('ready', ...) 似乎不适用于动态添加的
你在使用 jQuery 吗？从cmets来看，我认为是的。这可能很大程度上取决于元素的生成方式。如果这是从远程源动态加载的东西，那么使用延迟承诺可能是最简单的。如果这是来自直接的 ajax 调用，则有 ajax complete method。
我想我会在 .ajaxComplete 回调中再次手动触发该函数，我只是想有一些方法可以避免它并使其自动触发所以我不必害怕忘记添加每个相关的 ajaxComplete 回调中的函数

【解决方案3】：

请查看fiddle

你可以想出两种方法，

将每个新元素与事件绑定，这里你需要记住，你只需要将事件附加到新添加的元素，例如，如果你将事件添加到所有类，那么事件将两次附加到所有先前的元素。
将事件与正文绑定，以便它会自动记录必须触发事件的所有事件。

所以最好的方法是

$('body').on('click', '.deleteButton > a', function () {
    alert('attached');
    $(this).parent().append("<br><a href='#'>✖</a>");
    return false;
});

【讨论】：

正如我在问题中提到的，如果我有点击事件或任何其他默认 jquery 事件，我会这样做