javascript - Chrome 中未触发事件

Question

我在点击 #target3 时遇到问题不触发事件处理程序。我认为问题在于该事件没有传播到 <option> <select>的元素？令人烦恼的是这个片段适用于； 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 事件、.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/