jQuery插件没有触发

我有一个窗体有两个文本框，并在其他页面上使用了下面的代码，所以我知道这是有效的。

$(document).on('focusout', '.rate', function() { 
    var thisTextbox = $(this).val(); 

    if (thisTextbox.length > 0) { 
     var number = parseFloat(thisTextbox); 
     if (!isNaN(number)) 
      $(this).val(String.format("{0:#,0.00}", number)); 
    } 
});

这将格式化数字（即45 => 45.00，1324 => 1,324.00）。它使用一个外部的String.format JavaScript库。对于那些感兴趣的人，我在这里找到了这个图书馆：http://www.masterdata.se/r/string_format_for_javascript/。下载链接位于左上角。

我现在将要使用在多个地方的代码，并希望创建一个插件，我可以调用，如：

$(".rate").setDollarAmount();

我的插件看起来像：

(function($) { 
    $.fn.setDollarAmount = function(options) { 

    var classActivator = 'rate'; 

    return this.each(function() { 
     if ($(this).hasClass(classActivator)) { 
      $(document).on('focusout', classActivator, function() { 
       var thisTextbox = $(this).val(); 

       if (thisTextbox.length > 0) { 
        var number = parseFloat(thisTextbox); 
        if (!isNaN(number)) 
         $(this).val(String.format("{0:#,0.00}", number)); 
       } 
      });    
     } 
    }); 
};

}（ jQuery））;

代码正在运行，当我加载页面，因为我可以通过它。但是当我从一个文本框移动到另一个文本框时，事件不会触发。

这里的HTML：

<form> 
<input name="one" class="financial" /> 
<br /> 
<input name="two" /> 
</form> 

<a href="http://www.nbcnews.com">My Link</a> 

<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/stringformat-1.09.min.js"></script> 
<script src="js/jquery.greenify.js"></script> 
<script src="js/dollarAmount.js"></script> 
<script> 

$(function() { 

    $("input[name=one]").setDollarAmount(); 

    $('div').greenify({ 
     text: 'Hola', 
     color: '#FF0000' 
    }); 
}); 

</script>

有什么我一样，我需要做的就是这个工作？

TIA，

COSON

来源

2015-07-20 coson

你为什么要绑定到文件里面？只要绑定到元素。 – epascarello

我想这是因为你的插件是一个函数，而这个封闭功能只运行一次（当你加载页面）

相反的：

(function($) { [...] }(jQuery));

尝试在文件开头添加此项：

var $ = (undefined === $) ? jQuery : $;

来源

2015-07-20 23:27:04

继epascarello的评论，我修改了插件：

(function($) { 

    $.fn.setDollarAmount = function(options) { 

     return this.each(function() { 
      $(this).on('focusout', function() { 
       var thisTextbox = $(this).val(); 

       if (thisTextbox.length > 0) { 
        var number = parseFloat(thisTextbox); 
        if (!isNaN(number)) 
         $(this).val(String.format("{0:#,0.00}", number)); 
       } 
      });  
     }); 
    }; 
}(jQuery));

和生活是美好的。感谢您的评论！

来源

2015-07-20 23:40:59 coson

有一些错误。

您调用插件的输入元素没有rate类。在绑定事件之前检查它们是否拥有此类，并且只绑定到具有此类的元素，即使您的html中不存在该元素。
您的选择器在活动中没有点面。它应该是'.' + classActivator

这两个变化工作，如果你尝试这样的jsfiddle：https://jsfiddle.net/xz7ob8tj/

但即便如此，我也不会写这样的。首先，你的each()调用只是将同一个事件绑定到同一个类多次。它只需要一次绑定到一个班级。此外，您的hasClass是多余的，因为绑定到类的事件不会在没有该类的元素上调用。你可以这样做无需使用任何插件，简单地说：

var classActivator = "rate"; 
$(document).on('focusout', "." + classActivator, function() { 
    var thisTextbox = $(this).val(); 

    if (thisTextbox.length > 0) { 
     var number = parseFloat(thisTextbox); 
     if (!isNaN(number)) 
     $(this).val(String.format("{0:#,0.00}", number)); 
    } 
});

或与不使用类的一个插件，它只是结合在选择的元素，它的呼吁：

(function($) { 
    $.fn.setDollarAmount = function(options) { 
     this.focusout(function(){ 
      var thisTextbox = $(this).val(); 

      if (thisTextbox.length > 0) { 
       var number = parseFloat(thisTextbox); 
       if (!isNaN(number)) 
       $(this).val(String.format("{0:#,0.00}", number)); 
      } 
     }); 
    }; 
}(jQuery));

但一个插件似乎并不需要这个imho。

来源

2015-07-20 23:56:09

jQuery插件没有触发

回答

相关问题