.blur(） 与 .on(） ，后者最好使用 ( 当前 ）

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

本文关键字：当前 on blur      更新时间：2023-09-26

我正在做我的第一个表单计算，这是我在最后一天研究并提出的jQuery。

这只是从我发现让一切正常工作的情况来看，顺便说一句，不一定是最好的方法。我的老板希望我使用.blur()而不是.on()，但是我觉得我有更多的控制权，可以通过能够使用键控和单击表单输入进行计算来.on()。

有人可以更新我在这种情况下哪个更好吗？.on()是否被折旧并且更好地使用.blur()或者在这种情况下它们都可以吗？另外，如果模糊更好用，有人可以告诉我如何重新做我的功能/模糊，这样我就可以走在正确的道路上吗？谢谢！

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

使用 .blur()(或"blur"事件侦听器(的问题是，小计仅在您远离字段时才更新，因此更新本身不是"实时"的。 我建议您坚持收听点击和键入事件，以便在旅途中更新小计。

如果要使用模糊，只需更改此行：

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

到这一行：

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

您可以在使用.blur()侦听器的这个小提琴 (http://jsfiddle.net/teddyrised/V5hrY/7/( 中看到，您可以看到当您更改数量时，小计不会立即更新，而只会在您将注意力从字段上移开时更新。

p/s：就像我在评论中提到的，使用.on()是正确的方法。事实上，它的对应项(但不太等价(、.live()和.delegate()已被弃用。我绝对建议使用.on()而不是.blur() :)你的直觉实际上是正确的;)

附带说明一下，如果要将事件侦听器绑定到动态添加的元素，我建议改用以下命名法：

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

或者，如果您想收听模糊事件：

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

您可以将 .on(( 与许多不同的事件一起使用，包括 .blur((。因此，您实际上可以使用：

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

您可以称之为"最佳实践"。但在这种情况下，我认为 keyup 很好，所以我建议：

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

祝你好运

.blur(( 不适用于动态添加元素，并且需要在 .on('blur'( 工作时在 ready 函数中声明。看一看 

$(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
相关文章：