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

有人可以告诉我为什么在点击按钮后触发了三次选择事件？

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

Answer 1

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

似乎在click button事件时被调用两次;在

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

和select事件的默认处理程序

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

要在click的{{1}}或button字段的用户选择中拨打一次，请尝试检查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之前click button之前清除所选文本;原始事件处理程序最多应在.trigger("select") click元素

的button处调用一次

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

Answer 2

让我们看看，这里会发生什么：

＆＃13;

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

＆＃13;

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

＆＃13;

因此，我们有1个isTrigger和2个简单select个事件。

你可以过滤isTrigger事件，但不能分割另外两个 - 它们是相同的。

解决方法可能是根本不使用trigger：

＆＃13;

$(document).ready(function(){
    var mark = 0;
    $("input").select(function(e){
        if(!e.mark) e.mark = ++mark;
        console.log(e, e.mark);
        $("input").after(" Text marked!");
        e.stopImmediatePropagation();
    });
    $("button").click(function(){
        $("input")[0].setSelectionRange(0, $('input').val().length, 'forward');
      
    });
});

＆＃13;

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

＆＃13;

但是！我们看到它仍然触发了两次我认为应该向Chrome开发人员报告此错误。

作为解决方案 - 需要修改您的.select处理程序是幂等的并说，在.blur重置此处理程序状态。

Answer 3

您可以使用 .one

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

<强> FIDDLE

Answer 4

我认为它应该只打印一次。如果您使用FireFox或IE，实际上它只打印一次。如果您调整代码以便它使用其他类型的事件处理程序，它也只在Chrome上运行一次。

示例：

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $("input").after(" Text marked!");
    });
    $("button").click(function(){
        $("input").trigger("focus");
    });
});
</script>

上述工作演示：http://jsfiddle.net/gratiafide/3636q8rw/1/

因此我怀疑这是Chrome＆＃34;故障＆＃34;它打印3次。请注意，使用triggerHandler（）方法只按预期打印一次消息：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_triggerhandler_trigger

Answer 5

在IE和Firefox中，这很好用。仅在Chrome中注意到该问题

这似乎是因为事件冒出来了。如果您使用开发人员工具进行检查，则可以看到更多信息

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

$("input").after(" Text marked!");开发人员工具的相同断点的下两次点击显示了几乎相似的属性集。 请注意，bubbles属性为true

Answer 6

必须使用：

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

而不是trigger（）

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="Hello World"><br><br>

<button>Trigger the select event for the input field</button>

＆＃13;

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

6 个答案: