自制 jQuery 插件触发但不工作

Question

我写了一个简单的插件来验证需要是数字的输入字段是否确实是数字。

插件可以成功加载和触发，但没有做任何事情。但是，如果我手动输入 $(selector).validateNum();在控制台中，它完美运行。任何人都知道为什么？

live版本请查看此jsBin：

jsbin: http://jsbin.com/tusunuweto/1/edit?html,js,console,output

代码如下：

  $.fn.validateNum = function () {
    console.log('validation started');
    var numInputFields = this.find('input.number');

    $(numInputFields).each(function () {
      if ( isNaN( Number( $(this).val() ) ) ) {
        $(this).keyup(function () {
          alert("This field must be a number");
        });
      }
    });
  };

在我的 index.html 文件中：

<script type="text/javascript">

  $(function() {
    $('#selector').validateNum();
  });

</script>

Answer 1

您需要将 isNaN 检查移动到点击处理程序中，我还添加了一个正则表达式来删除非数字。

这行得通，但如果您想像这样进行验证，您可能需要查看 .validate

这样的库

 $(function () {

     $.fn.validateNum = function () {
         console.log('validation started');
         var numInputFields = this.find('input.number');
         $(numInputFields).each(function () {
             $(this).keyup(function () { // you need to move your isNaN check into the click handler
                 if (isNaN(Number($(this).val()))) {
                     $(this).val( $(this).val().replace(/[^0-9.]/g, "") ); // added this to remove non-numbers
                     alert("This field must be a number");
                 }
             });
         });
     };
     
     $(".testPlugin").validateNum();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testPlugin">
<input class="number" />

Answer 2

我看到几个问题

您没有正确链接

这本身并不是坏事（因为 .find 确实按照您使用它的方式工作）但它可以更明确。例如，如果您调用 $(".foo, .bar").validateNum()，应该清楚它将在每个选定元素中查找输入

您会在其他社区插件中很常见地看到这种模式

$.fn.myPlugin = function() {
  // `this` is the jQuery object that matches the selected elements

  // don't forget `return` to make your plugin chainable
  return this.each(function() {
    // iterate through the selected elements performing some operation
  });
};

但是！正如您接下来会看到的，我们甚至根本不需要使用 .find！

您没有使用事件委托

您专门为每个输入绑定了一个 .keyup 侦听器。如果您的页面上有很多输入，这可能会占用大量资源。

此方法使用委托，因此您不会将侦听器绑定到每个输入

$.fn.validateNum = function() {
  console.log("validation started");
  return this.each(function() {
    $(this).on("keyup", ".number", function(event) {
      var num = parseInt($(this).val(), 10);
      if (isNaN(num)) {
        alert("This field must be a number");
      }
    });
  });
};

$(".testPlugin").validateNum();

自制 jQuery 插件触发但不工作

Self-made jQuery plugin triggered but not working

javascript

jquery

jquery-plugins