Question

我面临的情况是，我希望处理click的{{1}}事件，该事件出现在具有类li的另一个元素下。这些标记中的大多数是由第三方optWrapper库生成的。所以，标记就像是

javascript

我的<div class="optWrapper multiple open"> <ul class="options"> <li data-val="7"><label>Critical Illness</label></li> <li data-val="25"><label>Critical Illness Insurance</label></li> <li data-val="3"><label>Critical Illness Silver</label></li> </ul> </div>代码是

jQuery

我找不到为什么这个事件没有被调用。请帮忙。

修改1

我猜这种行为是由于jquery在浏览器中下载后加载了这些元素，是吗？如果是的话，我怎么能解决它？

编辑2 这些元素是在dropdownlist的select事件之后动态生成的。

Answer 1

onsubject的答案是正确的。说使用.on而不是.click。

在jQuery 1.7之后，首选方法是.on（）

除了@onsubject的答案之外，因为他的答案在动态创建

时无效

".optWrapper li"

使用body或其父元素代替实际元素。

$('body').on('click', '.optWrapper li', function() {
//do something
}

Answer 2

这些元素是在dropdownlist的select事件之后动态生成的。

糟糕，您的事件侦听器在创建之前附加。当javascript事件冒泡到目标文档时，您可以通过监听它们的父级来处理该事件。 See Direct and delegated events section

将事件侦听器附加到不动态生成的父级。

$('#someparent').on("click","li.your_target",function(){
    alert();
});

Answer 3

将您的jquery代码放入$(document).ready(function (){}); 它会正常工作。

Answer 4

您可以使用.on代替.click

$(".optWrapper li").on("click", function () {
     alert();
});

在此处查看工作版本： http://codepen.io/ramiror/pen/zGeXPO

Answer 5

试试这个解决方案：

$(document).ready(function(){
    $(".optWrapper ul li").live('click', function(e){
        alert("eureka");
    });
});

JQuery - 事件不会触发其他元素下的元素

5 个答案: