Компонент Knockoutjs не может использовать функцию js

Question

Я пытаюсь создать компонент, который является в основном панелью поиска. Эти строки поиска в бэкэнд будут «и» вместе со всеми условиями поиска.

Итак, я создал компонент, и я его вижу, мой css работает нормально, но по какой-то причине он не будет запускать мою функцию js, которую я пытаюсь использовать для анимации метки. Это, конечно, только одна из проблем. Я также замечаю это, потому что я подключаю ярлык к строке поиска с идентификатором, а id можно использовать только один раз, он делает это, поэтому я не могу выполнить поиск на втором или 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 нагрузка не попала в компонент, который вы создали в более позднее время.

Поэтому вы должны использовать delegated events. Он будет регистрировать события для элементов-потомков, которые будут созданы позднее.

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