Question

美好的一天，

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

$(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 =＆gt; 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

Answer 1

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

而不是：

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

尝试在文件开头添加：

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

Answer 2

根据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 ));

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

Answer 3

有一些问题。

您调用插件的输入元素不具有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而言，插件似乎并不是必需的。

jQuery插件没有触发

3 个答案: