jQuery on("input paste") triggers twice after pasting

Question

I want to check whether the URL has been input into textarea or not. This is a function that checks textarea:

$('#text textarea').on('input paste', function() {
            checkUrl($(this));
        });

Only one URL is allowed, so after finding the URL handler is unbind using off:

function checkUrl(elem) {

var words = elem.val().split(/\s+/);
$.each(words, function(index, element) {
    if (isValidURL($.trim(element))) {          
        $.ajax({...}); // Ajax call
        elem.off('input paste');
        return;
    }
});

}

Function checkUrl is called not only once but twice after pasting the URL (CTRT+V). Ajax is also triggered twice.

Thanks a lot in advance.

EDIT

I've changed my code according to this:

$('#text textarea').bind('paste', function() {
        var _this = $(this);
        setTimeout( function() {
            checkUrl(_this);
        }, 100);
    });

It's now working with paste handler only, but the main problem persists...

`input` includes all methods of input, including pasting. Is there a reason for explicitly adding `paste`? — pimvdb, Oct 23 '12 at 07:24
No, I've just seen "input paste" here http://stackoverflow.com/questions/686995/jquery-catch-paste-input — peter.o, Oct 23 '12 at 07:29
Please paste your HTML code, or create a JSFiddle replicating your problem. It'll help us to help you. — Andreas Eriksson, Oct 23 '12 at 08:55
Well, it's not that easy :) I've found out that this "doble trigger" error happens only first time, when the page is loaded — peter.o, Oct 23 '12 at 09:25
I can't reproduce this issue on Chrome, nor when the page is first loaded. See http://jsfiddle.net/8SgYH/. What browser/OS are you using? — pimvdb, Oct 23 '12 at 17:39
Win7 32b, FF latest. I think there are two same handlers for pasting...but I can't find them... — peter.o, Oct 24 '12 at 06:40
I cannot reproduce in Firefox 16. If I only bind `input`, then it's always triggered once, as expected. Does the fiddle show the issue for you? If not, there must be something else happening in your code. — pimvdb, Oct 24 '12 at 11:29

score 1 · Answer 1 · answered Oct 23 '12 at 09:34

1

Get the event object and check for the event type 'input' so if its a paste event it will trigger the input event

you can try this

$('#text textarea').on('input paste',function(event){


    if(event.type=='input'){
       checkUrl($(this));
    }
 });

demo: http://jsfiddle.net/nLPrG/

answered Oct 23 '12 at 09:34

fuzionpro

601
6
19

I really like this solution. Very Elegant! – Paul Pettengill Jan 14 '14 at 21:08

score 0 · Accepted Answer · edited Jan 03 '16 at 11:23

0

I think I have solved the problem. Before binding events I´ve unbound everything from the element.

$('#text textarea').unbind();   
$('#text textarea').bind('paste', function() {
        var _this = $(this);
        setTimeout( function() {
            checkUrl(_this);
    }, 100);
})

edited Jan 03 '16 at 11:23

jcubic

61,973
54
229
402

answered Oct 26 '12 at 07:27

peter.o

3,460
7
51
77

1

Note that `bind`/`unbind` are deprecated. You'd better continue using `on`/`off`. – pimvdb Oct 26 '12 at 10:24
doesn't help me, now it fires even more times: paste, input, input – vladkras Aug 13 '15 at 21:16

jQuery on("input paste") triggers twice after pasting

2 Answers2