CODEWITHSUNDEEP
javascriptjquery
mike
mike

Reputation: 749

.blur() vs .on() , which is better to use ( currently )

I am doing my first form calculations and here is the jQuery I've researched and come up with over the last day.

This is just from what I've found to get everything working btw, not necessarily the best way probably. My boss would like me to use .blur() instead of .on(), however I have more control, I feel, with .on() by being able to do calculations with keyup & click on the form input.

Can someone please update me on which is better to use in this situation? Has .on() been depreciated and better to use .blur() or are they both ok in this situation? Also if blur is better to use can someone show me how to re-do my funciton w/ blur so im on the right path? Thanks!

http://jsfiddle.net/V5hrY/4/

$(".ticket input").on("keyup click", function(){

    //input changes Individual total
    var thisTotal = $(this).closest(".info").find('.total p span');
    var thisPrice = $(this).closest(".info").find('.price p span');
    var thisInput = $(this).closest(".info").find('.ticket input');
    thisTotal.html(thisPrice.html() * thisInput.val());

    //input changes Grand total
    var sum = 0;
    $('.total p span').each(function(){
        sum += parseFloat($(this).text());
        $('.gTotal span').html(sum);
    });

});

Upvotes: 3

Views: 3225

Answers (3)

Terry
Terry

Reputation: 66103

The thing with using .blur() (or the "blur" event listener) is that the subtotal is only updated when you focus away from the field, and therefore the updating is not "live" per se. I would recommend you stick to listening to the click and keyup events for updating the subtotal on the go.

If you want to use blur, simply change this line:

$(".ticket input").on("keyup click", function(){

…to this line:

$(".ticket input").on("blur", function(){

You can see in this fiddle (http://jsfiddle.net/teddyrised/V5hrY/7/) where the .blur() listener is used, you can see that the subtotal is not updated immediately when you change the quantity, but only when you focus away from the field.

p/s: Like I have mentioned in my comment, using .on() is the right way. In fact, it is its counterparts (but lesser equivalents), .live() and .delegate() that have been deprecated. I would definitely recommend using .on() over .blur() :) your intuition is in fact right ;)

On a side note, if you want to bind the event listener to dynamically added elements, I would suggest using the following nomenclature instead:

$(document).on("keyup click", ".ticket input", function(){

…or if you want to listen to the blur event:

$(document).on("blur", ".ticket input", function(){

Upvotes: 4

Vicky
Vicky

Reputation: 613

.blur() does not work for dynamic added element and also required to be declared in ready function While .on('blur') works. Take a look 

$(function(){
         $('#elm').blur(function(){ alert('Blured') }); 
         // assume element button with id button is already present in html
          $('#button').click(function(){
                     $('body').append('<input type="text" id="elm"  />'); // blur event above will not work on input with id elm
          });

});

 $(document).on('blur','#elm',function(){  alert('blured')  }); // this will work for dynamic added input field

Upvotes: 1

hatzaviv
hatzaviv

Reputation: 159

You can use .on() with many different events including .blur(). So you could actually use:

$(document).on("blur", ".ticket input", function(){

});

You can call it "best practice". but in this case I think keyup is good so I would suggest:

$(document).on("keyup", ".ticket input", function(){

});

Good luck

Upvotes: 1

Related Questions