Question

我正在尝试编写一个发送通知功能，其中右上角会显示OS X通知。我没有使用库来执行此操作，而是使用jquery作为资源。

我有一个名为#notifications的通知容器。我在向我的网站发送通知时附加的内容

通知会根据需要很好地发送和堆叠，但是我需要记录一个onclick事件，以便在点击时淡出并且下面的任何通知都会向上移动。它们都有动态ID，并且网站上可能会同时发出无数个通知（从来没有，但原则就是这样）。

我尝试过使用.bind()，.click()，.live()和.on()，但似乎没有一个正在使用。

我使用它们的方式是这样的：

$('.notification').bind('click', function()
{
    // CODE HERE
}

通知类只能在周围的容器上进行通知，如下所示：

<div class="notification"><p>Message here</p></div>

请帮帮我:)。

Answer 1

问题是注册事件时尚未创建元素。

如果我理解正确，你会有这样的事情：

<div id="notifications">
    <div id="some-dynamic-id" class="notification"></div>
</div>

如果这是正确的，你应该注册这样的事件：

$(function() {
    $("#notifications").on("click", ".notification", function() {
        //your code
    });
});

我知道您已尝试.on()，但我相信您尝试使用$(".notification")。请注意，这里我假设您在注册事件时已经存在#notifications。

编辑：$(function() {}); //do be, or not to be

在事件定义周围添加了$(function() {});部分，以处理调用#notifications时.on()不存在的可能情况。当文档加载时，它基本上就会发挥作用。

Answer 2

不要在通知类上使用bind，在子代上使用它：

$('#notifications').children('.notification').on('click', function() {
    // some stuff
})
$('#notifications').on('click', '.notitfication' function() {
    // this should work too
})

在未调用Div上的HTML类的Click事件上

2 个答案: