JQuery - 为什么Trigger方法会调用它三次？ [英] JQuery - Why does Trigger method call it three times?

问题描述

< pre class =snippet-code-js lang-js prettyprint-override> $（document）.ready（function（）{$（input）。select（function（）{$（输入）。after（Text marked！）;}）; $（button）。click（function（）{$（input）。trigger（select）;}）;}）;

 < script src =https：//ajax.googleapis .com / ajax / libs / jquery / 1.11.3 / jquery.min.js>< / script>< input type =textvalue =Hello World>< br>< br> < button>触发输入字段的选择事件< / button>  

如果你在最后一步断点检查开发人员工具，你会发现isTrigger属性为true意味着它来自我们定义的触发器。

$（输入）相同断点的下两次点击。（文字标记！ ）; 开发人员工具显示几乎相似的属性集。 请注意，bubbles属性为true

$(document).ready(function(){
    $("input").select(function(){
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("select");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<input type="text" value="Hello World"><br><br>

<button>Trigger the select event for the input field</button>

Source

Could someone tell me why select event triggered three times after a button click?

It seems that using IE and Chrome can lead different result.

解决方案

In IE and Firefox this works fine. Noticed the issue only in Chrome

This seems to be happen because the event gets bubbled up. If you inspect this using Developer tools you can see more information

If you inspect developer tools at last step breakpoint you can notice isTrigger attribute is true meaning it came from the trigger we have defined.

The next two hits of the same breakpoint of $("input").after(" Text marked!"); Developer tools shows almost similar set of attributes. Notice the bubbles attribute is true

这篇关于JQuery - 为什么Trigger方法会调用它三次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！