事件未在 Chrome 中触发答案

【问题标题】：Event not triggering in Chrome事件未在 Chrome 中触发
【发布时间】：2016-09-19 01:21:43
【问题描述】：

我遇到了单击#target3 不会触发事件处理程序的问题。我认为问题是事件没有传播到<select> 元素的<option>？令人烦恼的是这个 sn-p 工作; IE8及以上，还有火狐，但在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 是不可行的。

【问题讨论】：

您可以将事件处理程序绑定到<select> 标签的change 事件，而不是click 事件。然后在您的回调函数中，您可以评估是否选择了具有select3 的id 属性的选项，并采取相应措施。

标签： javascript jquery html google-chrome

【解决方案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/

【讨论】：

感谢您的帖子，但是这个 sn-p 对我来说仍然无法在 chrome 中工作。我只得到：You clicked >> #target1 You clicked >> #target2
您是否尝试创建一个元素并将click 事件添加到新元素？
我的目标是在点击#target3 时触发TargetClicked 事件。我只是为调试 atm 创建一个元素，而不是 console.log。
“我的目标是在点击#target3 时触发TargetClicked 事件。” 在点击#target3 时调用TargetClicked
感谢所有建议，我将不得不调查这些选项。

【解决方案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)});

【讨论】：