Question

我正在尝试创建一个基本上是搜索栏的组件。后端中的这些搜索栏将“和”一起搜索所有搜索的术语。

所以我创建了组件，我能够看到它，我的CSS工作正常，但由于某种原因，它不会运行我试图用来为标签设置动画的js函数。这当然只是其中一个问题。我也已经注意到了，因为我将标签连接到带有id的搜索栏，并且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组件是动态创建的，因此您在文档加载时注册的事件未达到您在以后创建的组件。

所以你应该使用delegated events。它会将事件注册到将在以后创建的后代元素。

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

Knockoutjs组件无法使用js功能

1 个答案: