I am doing my first form calculations and here is the jQuery I've researched and e 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!

/

$(".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);
    });

});

I am doing my first form calculations and here is the jQuery I've researched and e 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/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);
    });

});

• javascript
• jquery

Share Improve this question Follow edited Jul 28, 2014 at 8:48 morkro 4,68555 gold badges2727 silver badges3535 bronze badges asked Jul 28, 2014 at 7:28 mikemike 74922 gold badges1313 silver badges2424 bronze badges 3

• 2 .on() has not been depreciated — in fact, that is the case for .live() and .delegate(). – Terry Commented Jul 28, 2014 at 7:30
• Thats what I thought, thanks! What about my situation specifically, which is better to use with how this form im doing is set up? – mike Commented Jul 28, 2014 at 7:31
• 2 .blur(handler) is just a shorthand for .on("blur", handler) (api.jquery./blur/#entry-longdesc) – Josef Engelfrost Commented Jul 28, 2014 at 8:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 remend 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/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 ment, 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 remend 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(){

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

.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