如何防止BLUR事件多次触发？

Question

I have certain text input fields where if users change a value and then blur away from that text field, the js will fire and ajax request to update that value in the db. The problem is that I wrote a test to get such an event to fire and I notice that the inner 'blur' event usually fires between two and five times after I tab out of the input field:

    $('input[type=text]').on('input propertychange paste', function() {
        $(this).on('blur', function () {
            console.log('blur');
        });
    });

Even if I turn off the blur event handler right after catching it, it still fires two or three times. How do I get this to happen only once?

Answer 1

Just keep track of a hasFired boolean:

var hasFired = false;
$('input[type=text]').on('input propertychange paste', function() {
    $(this).on('blur', function () {
        if(!hasFired){
            hasFired = true;
            console.log('blur');
        }
    });
});

Actually, the real problem here is that you're binding the blur event multiple times. You can use a boolean like above to prevent that:

var isBound = false;
$('input[type=text]').on('input propertychange paste', function() {
    if(!isBound){
        isBound = true;
        $(this).on('blur', function () {
            console.log('blur');
        });
    }
});

Answer 2

Another solution would be is to create a class for those elements that already bound by that event.

$('input[type=text]').on('input propertychange paste', function() {
    if(!$(this).hasClass("bound")) {
      $(this).on('blur', function () {
         $(this).addClass("bound");
         console.log('blur');
      });
    }
});