Question

为什么第一次点击它时按钮会附加“Texted Marked”三次？然后，它会将相同的字符串附加两次，第二次单击按钮。

感谢您的帮助。

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

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

Answer 1

来自doc：

要手动触发事件，请在不带参数的情况下应用.select（）

$( "#other").click(function() {
  $( "#target" ).select();
});

所以试试这个：

<input type="text" value="Hello World"><br><br>

<button>Trigger the select event for the input field</button>
<ul></ul>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
        $("button").click(function(){
            $("input").select();
            $("ul").append(" Text marked!");
        });
    });
</script>

<强>更新如果你试试

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

警告会出现2次，所以我认为原因是每个单词都有2个单词和事件触发器。

Answer 2

您可以使用.triggerHandler代替.trigger，但不会选择文字：

＆＃13;

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

＆＃13;

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

＆＃13;

.trigger和.triggerHandler之间的差异顾名思义：.trigger将触发事件，而.triggerHandler只会调用事件的处理程序（所以你可以说.trigger试图复制一个实际的事件，但.triggerHandler并没有尝试这样做。

或者，也有这个小黑客（你可能会发现更有利，因为输入中的文本将被选中）：

＆＃13;

$(document).ready(function(){
  var attachSelectEventToInput = function() {
    $("input").one("select", function(){
      $("ul").append(" Text marked!");
    });
  };

  $("button").click(function(){
    attachSelectEventToInput();
    $("input").trigger("select");
  });
});

＆＃13;

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

＆＃13;

<小时/> 说实话，我很惊讶"select"处理程序被调用3次，无论你的输入元素有多少个单词。

更新：刚刚在Firefox和IE11中对此进行了测试，没什么奇怪的。 Opera和Chrome虽然显示了这种行为，但我认为它可能是V8独有的。

使用.trigger（）时多次追加

2 个答案: