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

Question

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

Answer 1

你有两种方法:

1. 您将回调绑定(bind)到触发框插入的事件。 (比如点击“addBox”按钮之类的)
2. 您观察父级框中的 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>