3

我试图找出是否可以创建一个类 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来测试。

4

4 回答 4

3

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

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

更新的小提琴

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

于 2013-01-23T10:32:56.273 回答
2

是的，可以使用事件委托：

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

我使用document来附加委托的事件处理程序，因为它会拾取与选择器匹配的所有元素.welcome，无论它们在页面上的什么位置。不过，理想情况下，您会使用最接近的静态元素，该元素将包含您想要匹配的所有元素。

于 2013-01-23T10:31:51.373 回答
2

是的...用于事件委托...

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

尝试这个

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

更好的是，如果您将事件附加到最近的元素...在您的情况下，它是具有 id #2 的 div <div id=2>

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

在这里摆弄

于 2013-01-23T10:32:08.733 回答
0

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

$('div[id="2"]').on('click', '.welcome', function(e) {
    alert("Hi there");
});
于 2013-01-23T10:37:53.093 回答