javascript - jquery 与动态 div 绑定(bind)

Question

我有一个关于 jquery 的问题。假设我在 jquery 中有 2 个 div，

<div id='1'>               //static div
</div>

<div id='2'>               //dynamic div
</div>

静态 div 始终存在于文档中，但当我们单击静态 div 时，动态 div 会切换。现在我想要的是在动态 div 上放置一个事件，例如:

$(document).on("show", "#2", {}, function() {
 alert("div 2 present");
});

这样当文档中存在动态 div 时我就可以做一些事情。我该怎么做？

Answer 1

元素变得可见时不会触发“show”事件。您必须将处理程序绑定(bind)到导致元素首先变得可见的事件。在本例中，这似乎是第一个 div 上的点击事件:

$(document).on("click", "#1", function() {
    $("#2").toggle();

    if ( $("#2").is(":visible") ) {
        alert("div 2 present");
    }
});

请注意，根据 HTML 4 规范，元素 ID 不应以数字开头。不过，这在 HTML 5 中是没问题的。

需要注意的进一步改进是，当将处理程序绑定(bind)到动态生成的元素时，最好以最近的静态父元素为目标，而不是允许在 document 处处理委托(delegate)。等级;即做 $("#parent").on("click", element, function() {}) .

最后，因为 <div id="1">是静态的，不需要委托(delegate)事件处理程序，可以直接绑定(bind)处理程序:

$("#1").click(function () {
    //...
});