JQuery trigger function triggers multiple times

Question

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("Text selected ");
  });
  $("button").click(function(){
    $("input").trigger("select");
    //$('input')[0].select();
});
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br/>
<button>Trigger select event</button>
</body>
</html>

The code above triggers select handler 3 times in chrome... That is 3 pieces of 'Text selected' appear.. I don't know why. How to fix this? By the way, if I use the commented way instead, still two pieces would appear. Why?

It's the same situation here http://stackoverflow.com/questions/8238599/jquery-click-fires-twice-when-clicking-on-label — halfzebra, Jul 18 '15 at 15:16

John R · Answer 1 · 2019-01-30T08:43:19.420

This is little bit surprising. It occurs not only in Chrome. But also in Safari and Opera too.

Solution 1:

My suggestion for you is return false;. Because in this case select event handler must return false. So that we can stop executing the further select event handlers. But calling .preventDefault() and .stopPropagation() will not accomplish this. Because here there is no parent-child relationship for event bubbling.

Try this code snippets:

$(document).ready(function () {
            $("input").select(function () {
                $("input").after("Text selected ");
                return false;
            });
            $("button").click(function () {
                $("input").trigger("select");
            });
        });

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

Solution 2: (As per your requirement)

Try with .on() and .off() method. It will do the trick.

$(document).ready(function () {
            $("input").on('select', appendWord);

            $("button").click(function () {
                $("input").trigger('select');
                $("input").off('select');
                setTimeout(function () {
                    $("input").on('select', appendWord);
                }, 300);
            });

            function appendWord() {
                $("input").after("Text selected ");
            }
        });

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

Hope this helps you.

I have updated my answer. Try solution 2 which meets your requirement. — John R, Jul 19 '15 at 16:56
"*Calling `.preventDefault()` and `.stopPropagation()` will not accomplish this.*" vs "*But `.preventDefault()` and `.stopPropagation()` will also do the trick.*" - which one is it now? — Bergi, Jan 29 '19 at 19:46
@Bergi Updated the content. I couldn't remember exactly for what reason I've mentioned it. It might be due to some other's discussion. Anyway thank you for letting me to know. — John R, Jan 30 '19 at 08:57

score 0 · Answer 2 · answered Jul 18 '15 at 14:42

It's strange but I fixed this with e.preventDefault();
maybe when it selects text it fires event again.

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("input").on('select', function(e) {
    e.preventDefault();
    $(this).after("Text selected ");
  });
  $("button").click(function(){
    $("input").select();
    //$('input')[0].select();
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br/>
<button>Trigger select event</button>
</body>
</html>

score 0 · Answer 3 · answered Jul 18 '15 at 14:48

0

try this:

$(document).ready(function(){
   $("input").on('focus',function(){
      $("input").after("Text selected ");
   });
   $("button").click(function(){
      $("input").trigger("focus");
   });
});

answered Jul 18 '15 at 14:48

Jyoti Prakash

1,180
8
9

Mark Schultheiss · Accepted Answer · 2015-07-18T19:00:13.570

I would suggest a custom event due to the fact that you are doing two things here. To do this for a given element, I added a class (just to make it specific to text input I also added that type). (avoids the button input type)

Adjusted markup:

<input type="text" class="textentry" name="FirstName" value="Hello World" />
<br/>
<button>Trigger select event</button>

Adjusted code:

$(document).ready(function () {
    $("input.textentry[type=text]").on('textselect',function () {
      $("input.textentry[type=text]").select().after("Text selected ");
    });
    $("button").click(function () {
        $("input.textentry[type=text]").trigger("textselect");
    });
});

Sample fiddle: http://jsfiddle.net/MarkSchultheiss/gf6rycao/

NOTE the shortcut for this would be to only do:

$("button").click(function () {
    $("input.textentry[type=text]").select().after('TextSelected');
});

Note on [type=text] I used that rather than :text to allow the potential use of the performance gain of querySelectorAll() in the library

Putting in this way works fine when I click the button. Desired thing happens. However, nothing happens when I select the text manually. That is it is still incomplete... — Euclid Ye, Jul 19 '15 at 02:32

JQuery trigger function triggers multiple times

4 Answers4