实施例

Question

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

Answer 1

您有两种方式：

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

然而，我会选择1，因为观看DOM更改是昂贵的

实施例

示例1：

在同一回调中同时添加两个框

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

示例2：

使用DOM Watcher ...

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

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

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

Answer 3

请查看fiddle

你可以提出两种方法，

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

最好的方法是

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

如何将没有特定事件的函数绑定到动态添加的元素？

3 个答案:

实施例

示例1：

示例2：