Knockoutjsコンポーネントがjs関数を使用できない

Question

基本的に検索バーであるコンポーネントを作成しようとしています。バックエンドのこれらの検索バーは、検索対象となるすべての用語を 'と'一緒にします。

私はコンポーネントを作成し、それを見ることができます。私のCSSは正常に動作していますが、ラベルをアニメーション化するために使用しようとしているjs関数が何らかの理由で実行されません。これはもちろん問題の1つだけです。私はすでにidにラベルを接続し、idは一度しか使用できないので、それを作っているので、私は2番目またはn番目のバーを検索することができません。ラベル。

どのように私はコンポーネントでこれらの問題を回避するためのアイデアですか？ここで

は私のコンポーネントのコードです：ここで

ko.components.register('andBlock', { 
    template: 
     '<div class="andDisplay"> \ 
     <div class="initalAndOutput"> \ 
      <p class="orTermHeader" data-bind=""></p> \ 
      <span class="orTermList" data-bind=""></span> \ 
     </div> \ 
     <div class="searchForm andSearchForm" action=""> \ 
      <div class="andSearchBar"> \ 
      <label for="twoSearch">Add search term</label> \ 
      <input id="twoSearch" class="andSearch searching autocomplete" name="search" type="text" data-bind="" /> \ 
      <span class="searchIcon"><a class="mdi mdi-magnify mdi-18px" href="#"></a> \ 
      </div> \ 
     </div> \ 
     </div>' 
}); 

は、私が実行しようとしていますjqueryの関数である：

$(function() { 
    $('.andSearch').keyup(function() { 
     $('.andSearchBar').addClass('typing'); 
     if($(this).val().length === 0) { 
      $('.andSearchBar').removeClass('typing'); 
     } 
    }); 
}); 

は、これは私がHTMLのコンポーネントを取り込むためにやっているすべてです：

<div data-bind="foreach: andsCollection"> 
    <div data-bind="component: 'andBlock'"></div> 
</div> 

Answer 1

andBlockコンポーネントは動的に作成されるため、documに登録したイベント後で作成したコンポーネントにentロードがヒットしませんでした。

delegated eventsを使用する必要があります。後で作成される子孫要素にイベントを登録します。

$(function() { 
    $(document).on("keyup", '.andSearch', function() { 
     $(this).closest('.andSearchBar').addClass('typing'); 
     if($(this).val().length === 0) { 
      $('.andSearchBar').removeClass('typing'); 
     } 
    }); 
});