How to prevent BLUR event from firing multiple times?

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

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