Question

我遇到一个问题，点击#target3不会触发事件处理程序。我认为问题是该事件没有传播到<option>元素的<select>？令人烦恼的是这个片段的作用; IE8及以上版本和Firefox，但在Chrome中不起作用？

＆＃13;

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)});
    }
}

＆＃13;

<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>

＆＃13;

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

Answer 1

您正在将this传递给新活动，即window。而是通过$("#target"+target)。

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

＆＃13;

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))
       });
    }
}

＆＃13;

<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>

＆＃13;

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)});

事件未在Chrome中触发

2 个答案: