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的深处。

我想要做的是当'selected'出现时我想要附加另一个类。这样我可以在其他地方重复使用下拉菜单。但出于以下两个原因中的一个或两个原因，我无法访问此课程：

1]它是动态添加的，所以我的jquery将类添加到它已经在页面加载时运行完毕。我无法使用$(".selected").on("click", function(event){}，因为我没有点击“已选中”，而是点击了“clickAnchor”，因此我不确定如何以这种方式访问“已选择”。

2]从上面开始，当我尝试$("#clickAnchor").on("click", function(event){}时，没有任何事情发生 - 这是因为新的div被创建为<body>的直接子项，而不是'菜单的子项“？换句话说，它是否与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 个答案: