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

<script src=".11.3/jquery.min.js"></script>


<input type="text" value="Hello World"><br><br>

<button>Trigger the select event for the input field</button>

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

Could someone tell me why select event triggered three times after a button click?

It seems that using IE and Chrome can lead different result.

• javascript
• jquery

• Strange since calling $("input").trigger("select"); outside the click and it runs once. – epascarello Commented Nov 25, 2015 at 3:21
• Try return false; after the after() – Scottux Commented Dec 11, 2015 at 18:58

6 Answers 6

JQuery - Why does Trigger method call it three times?

Appear to be called twice at click event of button ; at

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

and default handler for select event

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

To call once at click of button , or user selection at input field , try checking event.isTrigger to determine if event called by .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>

alternatively, using setTimeout to allow selected text to be cleared before at click of button before .trigger("select") called ; original event handler should be called at most once at click of button element

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

Let's see, what happens here:

$(document).ready(function(){
    $("input").select(function(e){
        console.log(e, e.isTrigger);
        $("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>

So, we have 1 isTrigger and 2 simple select events.

You can to filter isTrigger event, but can't to split two other - they are same.

Solution can be to not use trigger at all:

$(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');
      
    });
});

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

But! We see it still triggered twice.
I think this bug should be reported to Chrome developers.

As solution - need modify your .select handler to be idempotent.
and say, on .blur reset this handler state.

In IE and Firefox this works fine. Noticed the issue only in Chrome

This seems to be happen because the event gets bubbled up. If you inspect this using Developer tools you can see more information

If you inspect developer tools at last step breakpoint you can notice isTrigger attribute is true meaning it came from the trigger we have defined.

The next two hits of the same breakpoint of $("input").after(" Text marked!"); Developer tools shows almost similar set of attributes. Notice the bubbles attribute is true

You could use .one

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

FIDDLE

I believe it should only print once. If you use FireFox or IE, in fact, it does only print once. If you adjust the code so that it uses another type of event handler, it only runs once on Chrome as well.

Example:

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

Working demonstration of the above: http://jsfiddle.net/gratiafide/3636q8rw/1/

Thus I suspect it is Chrome's "fault" that it prints 3 times. Notice that using the triggerHandler() method prints the message just once as expected: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_triggerhandler_trigger

Must use :

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

instead of trigger()

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

});

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