jQueryの入力イベントは、ページのリロード後にトリガのみ

Question

基本的に私は2つのdiv、ページロードで

<div id="firstPage"></div>

と

<div id="details"> 
    <div id='searchBox' class='detail--searchBox'> 
     <input id='txtSearchTerm' name='txtSearchTerm' type='text'> 
    </div> 
</div> 

IDの検索ボックスとテキストボックスが隠されているとそれはクリックで示されているがありますid firstPageのdivのイベントです。私は、テキストボックスの変更時にトリガされなければならない次の機能を持っています。しかし、この入力イベントは、ページが再ロードされるとトリガーされます。

onSearchBoxOnDetailsChange: function() { 
    $("#searchBox").on("input", "#txtSearchTerm", function() { 
     var val = $(this).val().trim(); 
     val = val.replace(/\s+/g, ''); 
     if (val.length > 1) { 
      console.log(val); 
     } else { 

     } 
    }); 
}, 

Answer 1

以下のようなコードを書く：

onSearchBoxOnDetailsChange: function() { 
    $(document).on("input", "#searchBox #txtSearchTerm", function() { 
    var val = $(this).val().trim(); 
    val = val.replace(/\s+/g, ''); 
    if (val.length > 1) { 
     console.log(val); 
    } else { 

    } 
    }); 
},