如何在頁面加載后創建的div中添加偵聽器？

Question

我在這里查找了其他類似的問題，看起來使用on（）進行事件委派在某種程度上符合我的需要。

我有一個錨點，用戶單擊該錨點即可生成下拉菜單。 通過CSS的菜單顯示在鏈接下方，但是在DOM中，下拉列表的新div是在錨所在的div的“范圍”之外生成的。 所以是這樣的：

選擇之前：

<body>
    <div>
        <!-- load of other nested divs -->
        <div class="menu">
            <a href="#" id="clickAnchor">Select from this list</a>
        </div>
    </div>
</body>

選擇后：

<body>
    <div>
        <!-- load of other nested divs -->
        <div class="menu">
            <a href="#" id="clickAnchor">Select from this list</a>
        </div>
    </div>
    <div class="selected">
        <ul>
            <li>...</li>
            <!-- lots of these -->
        </ul>
</body>

我使用表示“菜單”嵌套在第一個主體div的深處。

我想做的是，當“選定”出現時，我想給它添加另一個類。 這樣一來，我可以在其他地方重復使用下拉菜單。 但是由於兩個或兩個原因之一，我無法訪問此類：

1]它是動態添加的，因此我向頁面添加類的jquery已在頁面加載時完成運行。 我無法使用$(".selected").on("click", function(event){}因為我沒有單擊“ selected”，而是單擊了“ clickAnchor”，所以我不確定如何訪問“這樣選擇。

2]從上面開始，當我嘗試$("#clickAnchor").on("click", function(event){}也沒有發生任何事情-這是因為新的div被創建為<body>的直接子代<body> ，而不是'menu'的子級；換句話說，這與click事件的范圍有關嗎（可能在這里完全錯誤）。

Answer 1

如果無法控制添加div，請嘗試制作一個樣機。

$("#clickAnchor").on("click", function() {
    // code to append the div
    setTimeout(function() {
        var div = $(".selected");
        // add your code to add the class
    }, 0);
});

如果將超時設置為0ms，則在DOM趕上插入div后，它將被排隊等待執行，因此您應該可以選擇它。 另外，您能否對select2.js腳本的執行作出承諾？ 那么您將不需要超時。

如何在頁面加載后創建的div中添加偵聽器？

問題描述

1 個解決方案

解決方案1
2 2015-07-10 08:55:12

如何在頁面加載后創建的div中添加偵聽器？

問題描述

1 個解決方案

解決方案1 2 2015-07-10 08:55:12

解決方案1
2 2015-07-10 08:55:12