Appending multiple times when using .trigger()

Question

Why does the button append "Texted Marked" three times when I click on it the first time? And then, it appends the same string two times, the second time I click on the button.

I would appreciate your help.

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

From doc :

To trigger the event manually, apply .select() without an argument

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

So try this:

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

UPDATE. if you try

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

alert will appear 2 times, so I think the reason is that you have 2 words and event triggers for each word.

Answer 2

You could use .triggerHandler instead of .trigger , the text won't be selected though:

 $(document).ready(function(){ $("input").select(function(){ $("ul").append(" Text marked!"); }); $("button").click(function(){ $("input").triggerHandler("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> 

The difference between .trigger and .triggerHandler is as the name implies: .trigger will trigger the event, while .triggerHandler will merely invoke the handler for the event (so you could say that .trigger tries to replicate an actual event, but .triggerHandler doesn't try to do that at all).


Alternatively, there is this little hack as well (which you may find more favorable, since the text inside the input will be selected):

 $(document).ready(function(){ var attachSelectEventToInput = function() { $("input").one("select", function(){ $("ul").append(" Text marked!"); }); }; $("button").click(function(){ attachSelectEventToInput(); $("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> 

---

To be honest, I am surprised as well that the "select" handler is called 3 times, regardless of the number of words your input element has.

Update : just tested this in Firefox and IE11, nothing odd. Opera and Chrome show this behavior though, so I am thinking it may be V8-exclusive.