Question

我试图找出是否有可能创建一个类clicklistener。当我创建一个div侦听器时，我可以先添加侦听器，然后我可以创建div。

所以我想先创建一个监听器，然后再添加该类。有可能吗？

HTML：

<div>
    <div id="1">
        <div id="2">
            <!-- will be created.. -->
        </div>
    </div>
</div>

js：

$(".welcome").click(function() {
    alert("Hi there");
});

// Later the class album will be loaded
// When you put it above it will work..
welcome = document.getElementById("2");
welcome.innerHTML = '<div id="3" class="welcome"> Hello</div>';

我做了一个jsfiddle来测试。

Answer 1

你可以做到这一点。在jQuery中，这种模式称为委托事件。您可以将单击处理程序附加到#2元素，一旦.welcome元素附加到该元素，该元素就可用。试试这个：

$('#2').on('click', '.welcome', function() {
    alert("Hi there");
});

Updated fiddle

请注意，在我的小提琴中我还修改了普通的javaScript以使用jQuery方法。如果你有它们，你也可以使用它们。

Answer 2

是的，可以使用event delegation：

$(document).on('click', '.welcome', function(e) {
    alert("Hi there");
});

我已使用document附加了委托事件处理程序，因为它会选择与.welcome选择器匹配的所有元素，无论它们在何处这页纸。理想情况下，您将使用最接近的静态元素，该元素将包含您想要匹配的所有元素。

Answer 3

是的...使用on事件委托...

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

试试这个

 $(document).on('click','.welcome',function() {
    alert("Hi there");
 });

更好的是，如果您将事件附加到最接近的元素...在您的情况下，div为id＃2 <div id=2＆gt;

$('#2').on('click', '.welcome', function() {
   alert("Hi there");
});

fiddle here

Answer 4

当页面准备就绪时，您必须委托dom中可用的最近的现有父级：

$('div[id="2"]').on('click', '.welcome', function(e) {
    alert("Hi there");
});

单击将在稍后创建的侦听器类

4 个答案: