Самодельный плагин jQuery запускается, но не работает

Question

Я написал простой плагин, чтобы проверить, являются ли поля ввода, которые должны быть числом, действительно номерами.

Плагин может быть успешно загружен и запущен, но он ничего не делает. Однако, если я вручную набираю $ (селектор) .validateNum(); в консоли он отлично работает. Кто-нибудь знает почему?

Пожалуйста, проверьте этот 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

Пару вопросов я вижу

Вы неправильно привязываетесь

T его по сути не плохо (потому что .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(); 

Answer 2

Вам нужно чтобы переместить вашу проверку isNaN в обработчик кликов, я также добавил регулярное выражение, чтобы удалить n по номерам.

Это работает, но если вы хотите сделать проверку, как это, вы можете посмотреть в библиотеку как .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" />