javascript - JQuery - 为什么 Trigger 方法调用它三次？

Question

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

有人能告诉我为什么点击按钮后 select 事件会触发 3 次吗？

似乎使用IE和Chrome会导致不同的结果。

Answer 1

JQuery - Why does Trigger method call it three times?

似乎在 button 的 click 事件中被调用了两次；在

$("input").trigger("select");

select 事件的默认处理程序

$("input").select(function(){
    $("input").after(" Text marked!");
});

要在 button 的 click 或 input 字段中的用户选择时调用一次，请尝试检查 event.isTrigger 确定 event 是否被 .trigger()

调用

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input />
<button>click</button>

---

或者，使用 setTimeout 允许在 .trigger("select") 称为 ;在 button 元素的 click

处最多应调用一次原始事件处理程序

$(document).ready(function() {
  
  $("input").select(function(e) {
    console.log(e);
    $("input").after(" Text marked!")
  })

  $("button").click(function() {
    setTimeout(function() {
      $("input").trigger("select");
    })
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input />
<button>click</button>