Question

这是我的代码：

$("input[type=text]").on("input", function(){
  console.log("input event fired.");
})

$("input[type=button]").on("click", function(){
  var event = new Event('input');
 $("input[type=text]").dispatchEvent(event);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

正如您所看到的，当您在输入中写入内容时，input事件也会起作用。如何在单击按钮时模拟该事件？

Answer 1

jQuery使用trigger

如果要使用dispachtEvent，则需要DOM元素。

＆＃13;

$("input[type=text]").on("input", function(){
  console.log("input event fired.");
})

$("input[type=button]").on("click", function() {
  // EITHER
  $("input[type=text]").trigger("input");
  // OR
  var event = new Event('input');
  $("input[type=text]")[0].dispatchEvent(event); // DOM 
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

＆＃13;

Answer 2

$("input[type=text]").on("input", function(){
  console.log("input event fired.");
})

$("input[type=button]").on("click", function(){
 $("input[type=text]").trigger("input");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

Answer 3

您只需使用 .trigger() 方法按名称触发事件，如：

$("input[type=button]").on("click", function(){
    $("input[type=text]").trigger("input");
})

＆＃13;

$("input[type=text]").on("input", function() {
  console.log("input event fired.");
})

$("input[type=button]").on("click", function() {
  $("input[type=text]").trigger("input");
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="write .." />
<input type="button" value="emulate input event" />

＆＃13;

Answer 4

在jQuery中，您只需在元素上调用事件类型即可。

要在元素上调用click事件，请执行以下操作：

$("foo").click();

对于输入字段，最佳选择通常是

$("foo").change();

如何使用jQuery模拟输入事件？

4 个答案: