未調用Div上HTML類的On Click事件

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() {}); //do be, or not to be

$(function() {}); 在事件定義周圍添加了部分，以處理調用.on()時#notifications不存在的可能情況。 實質上是在文檔加載時漫游。

Answer 2

不要在通知類上使用綁定，而在子類上使用它：

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