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 stackoverflow.com/questions/8238599/… — halfzebra
– halfzebra, Commented Jul 18, 2015 at 15:16

John R · Accepted Answer · 2019-01-30 08:43:19Z

2

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.

edited Jan 30, 2019 at 8:43

answered Jul 18, 2015 at 18:36

John R

2,8212 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John R Over a year ago

I have updated my answer. Try solution 2 which meets your requirement.

Bergi Over a year ago

"Calling .preventDefault() and .stopPropagation() will not accomplish this." vs "But .preventDefault() and .stopPropagation() will also do the trick." - which one is it now?

John R Over a year ago

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

Mark Schultheiss · Accepted Answer · 2015-07-18 19:00:13Z

0

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

edited Jul 18, 2015 at 19:00

answered Jul 18, 2015 at 18:49

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

1 Comment

Euclid Ye Over a year ago

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

num8er · Accepted Answer · 2015-07-18 14:42:50Z

0

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>

answered Jul 18, 2015 at 14:42

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Comments

Jyoti Prakash · Accepted Answer · 2015-07-18 14:48:39Z

0

try this:

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

answered Jul 18, 2015 at 14:48

Jyoti Prakash

1,2609 silver badges9 bronze badges

Collectives™ on Stack Overflow

JQuery trigger function triggers multiple times

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related