我在这里查找了其他类似的问题,看起来使用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>
我使用<!-- load of other nested divs -->
表示“菜单”嵌套在第一个主体div的深处。
我想要做的是当'selected'出现时我想要附加另一个类。这样我可以在其他地方重复使用下拉菜单。但出于以下两个原因中的一个或两个原因,我无法访问此课程:
1]它是动态添加的,所以我的jquery将类添加到它已经在页面加载时运行完毕。我无法使用$(".selected").on("click", function(event){}
,因为我没有点击“已选中”,而是点击了“clickAnchor”,因此我不确定如何以这种方式访问“已选择”。
2]从上面开始,当我尝试$("#clickAnchor").on("click", function(event){}
时,没有任何事情发生 - 这是因为新的div被创建为<body>
的直接子项,而不是'菜单的子项“?换句话说,它是否与click事件的范围有关? (这里可能完全错了)。
答案 0 :(得分:2)
如果您无法控制附加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脚本作出承诺?那么你就不需要超时了。