Как связать событие keyup с плагином jQuery

Question

Я пытаюсь создать плагин jQuery, которому необходимо установить триггер при активации тега ввода. Но, как-то ее не работает :(

Я пробовал до сих пор:

JS:

$.fn.search_panel = function() { 
    if($(this).prop("tagName").toLowerCase() == 'input'){ 
     var input_str = $.trim($(this).val()); 
     console.log($(this)); 

     onkeyup = function(){ 
      console.log(input_str); 
     } 
    } 
}; 

плагин инициализации

$(document).ready(function(){ 
    $('input').search_panel(); 
}); 

HTML:

<input type="text" /> 

Из приведенной выше коды, это только консоли при загрузке страницы в первый раз, но после ввода ничего ввода это не утешает.

Answer 1

Вы ненароком связывание с window «s onkeyup события. Вы должны использовать $(this).on вместо того, чтобы привязать к отдельному событию KeyUp на каждый входе:

$.fn.search_panel = function() { 
 
    // Iterate all elements the selector applies to 
 
    this.each(function() { 
 
     var $input = $(this); 
 
     // Can probably make this more obvious by using "is" 
 
     if($input.is("input")){ 
 
      // Now bind to the keyup event of this individual input 
 
      $input.on("keyup", function(){ 
 
       // Make sure to read the value in here, so you get the 
 
       // updated value each time 
 
       var input_str = $.trim($input.val()); 
 
       console.log(input_str); 
 
      }); 
 
     } 
 
    }); 
 
}; 
 
$('input').search_panel();

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

Answer 2

Добавить keyup события внутри плагина и привязать его к входу тока,

$.fn.search_panel = function() { 
    if ($(this).prop("tagName").toLowerCase() == 'input') { 
     $(this).keyup(function() { 
      var input_str = $.trim($(this).val()); 
      console.log($(this)); 
      console.log(input_str); 
     }); 
    } 
}; 

Demo