jQueryカスタムプラグイン 'change'-eventが即座に処理されていません

Question

jQueryカスタムプラグインとして非常に軽量なライブ検索を構築しようとしています。私が達成したい何

は、私がどのinput[type='text']に$('input[type="text"].js_test').liveSearch(successCallBackFn);を呼び出し、$.ajax()呼び出しから受信したデータがsuccessCallBackFn()によってhandeledされていることです。私のテストケースでは、単にDOMに追加しています。

<input class="js_test" type="text" name="test" value="" data-identifier="testajax" /> 


$(document).ready(function() { 
    $('.js_test').liveSearch(mySuccessCallback); 
}); 

//callback 
function mySuccessCallback($liveSearchTrigger, response) { 
    $('body').append(response.results_html); 
} 

//jQuery plugin 
(function($) { 

    $.fn.liveSearch = function(successCallbackFn) { 

     var $liveSearchTrigger = $(this); 

     $liveSearchTrigger.change(function() { 
      $.ajax({ 
       url: '/ajax/livesearch/' + $(this).data('identifier'), 
       type: 'POST', 
       dataType: 'JSON', 
       data: { 
        search: this.value 
       }, 
       success: function(response) { 
        if (response.success) { 
         if (typeof(successCallbackFn) !== 'undefined') { 
          return successCallbackFn($liveSearchTrigger, response); 
         } 
        } 
       } 
      }); 
     }); 

     return this; 
    }; 

}(jQuery)); 

入力に何か入力すると、何も起こりません。 （Firefox）デベロッパーツールでXHRが発生していないことがわかりますまでブラウザウィンドウを再度クリックすると、POSTが処理され、要素にデータが追加されています。

私は$(document).ready()関数のスコープに

$('.js_test').change(function() { 
    console.log($(this).val()); 
}); 

を追加すると、すべての変更が即座に登録されています。私は（それにクリックして）、ブラウザウィンドウを再集束し、どのように私は入力に入力するとき$liveSearchTrigger.change()が瞬時にトリガされていることを達成ん後

はなぜPOSTし、その結果$('body').append()にのみトリガされますか？

私は非常にマイナーなものを見逃していると確信しています。これは、カスタムjQueryプラグインを作成する私の最初の試みです。

Answer 1

変更イベントは、要素がテキスト入力にフォーカスを失った場合にのみトリガされます。 https://api.jquery.com/change/

をし、また、あなたが毎回これらのメソッドを使用する場合は（）またはのkeydown（）

を）（.changeためにあなたの呼び出しを変更キーの押下のようなものに呼び出す：

私は再読推薦しますキーが入力内で押されると、その値が変更されたと見なすことができ、あなたのlivesearchを実行します。ここ

キー押下のドキュメント：https://api.jquery.com/keypress/

注：パフォーマンスを得るために、あなたはおそらく、押されたキーは、すなわち、修飾されていないことを確認して追加することになるでしょう。シフトまたはエスケープ