事件未在Chrome中触发

Question

我遇到的问题是，单击#target3不会触发事件处理程序。 我认为问题在于事件没有传播到<select>元素的<option>吗？ 令人讨厌的是，此代码片段有效； IE8及更高版本以及Firefox，但不能在Chrome浏览器中使用吗？

 var target = 1; $("#target"+target).bind("click.clickEvent",function(){TargetClicked(this)}); function TargetClicked(ele) { if($(ele).prop("id") == ("target" + target)) { $("body").append("You clicked >> #" + $(ele).prop("id") + "<br>"); $(ele).unbind(".clickEvent"); target++; $("#target"+target).bind("click.clickEvent",function(){TargetClicked(this)}); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="target1">Click here first</p> <p> <select id="target2"> <option>----</option> <option id="target3">target 3</option> </select> </p> 

这是来自一个非常大的项目，因此，如果可能的话，我想尝试查找此问题的javascript / JQuery修复程序或解决方法，因为编辑HTML是不可行的。

Answer 1

您正在this传递给新事件window 。 而是传递$("#target"+target) 。

注意，解决方法。 要在chrome上返回预期结果，您可以使用change事件select.options.selectedIndex .is() ， select.options.selectedIndex ， .eq()

 var target = 1; $("#target"+target) .bind("click.clickEvent change.clickEvent",function() { TargetClicked(this) }); function TargetClicked(ele) { if ($(ele).prop("id") == ("target" + target)) { $("body").append("You clicked >> #" + $(ele).prop("id") + "<br>" + ($(ele).is("select") ? "You clicked >> #" + $("option") .eq(ele[0].options.selectedIndex) .prop("id") : "") ); $(ele).unbind(".clickEvent"); target++; $("#target"+target) .bind("click.clickEvent change.clickEvent",function(e) { TargetClicked($("#target"+target)) }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <p id="target1">Click here first</p> <p> <select id="target2"> <option>----</option> <option id="target3">target 3</option> </select> </p> 

jsfiddle https://jsfiddle.net/xy5rc1tu/1/

Answer 2

这是一个已知的Chrome错误

https://bugs.chromium.org/p/chromium/issues/detail?id=26017

我检查了要定位的元素类型，从而解决了此问题，然后在<option>的情况下，我应用了change事件而不是click事件。

需要说明的是，此事件必须在<select>元素上进行，而不是在<option>元素上进行，在我看来，这不是理想的选择。

if(!$("#target"+target).is("option"))
    $("#target"+target).click(function(){TargetClicked(this)});
else
    $("#target"+target).parent("select").change(function(){TargetClicked(this)});