javascript - 使用 Knockjs 时未触发单击事件

Question

我有以下代码，它使用 Knockout.js 嵌入到数据绑定(bind)中

  <div data-bind="foreach {data:movies}">
     <div class="content-item full bottom-border">
        <div class="content-item-container">            
           <div class="movie-listing-header">
               <a class="icon arrow" data-bind="click: $parent.arrow"></a>
               <div class="movie-details">
                    <div class="title">
                       <a href="#" data-bind="text: MovieName, attr: { href: DetailsUrl }"></a>
                    </div> 
                    <div class="info">
                        <div>                      
                            <span class="rating" data-bind="css: 'rating-' + (MovieRating || 'NR').toLowerCase().replace(/-/, '')"></span> 
                        </div>                        
                    </div>
               </div>
            <a class="icon right-arrow"></a>      
          </div>
        <div class="showtimes">
             <div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>    
        </div>    
      </div>
    </div>
  </div>

我试图让“图标箭头”在按下时处理以下 js 脚本:

 $('.icon.arrow').click(function () {
        var active_el = $(this);
        $('.movie-listing-header').each(function () {
            if ($(this).get(0) === active_el.parent().get(0)) {

                if ($(this).hasClass('active')) {
                    $(this).siblings('.showtimes').hide();
                } else {
                    $(this).siblings('.showtimes').show();
                }
                $(this).toggleClass('active');

            } else {
                $(this).removeClass('active');
                $(this).siblings('.showtimes').hide();
            }
        });

    });

上面的代码在另一个不使用knockout.js的程序中工作正常，当我尝试在knockout.js绑定(bind)之外触发“图标箭头”时它也工作。

我已经厌倦了在我的 View 模型中编写一个函数，希望它能触发这个 JavaScript，但没有运气。有什么想法

Answer 1

我的猜测是您添加了 click处理程序之前调用 applyBindings在你的 html 上。
换句话说，您定义了 click处理程序 BEFORE 甚至是由 Knockout foreach 创建的绑定(bind)。

为了解释它，例如假设我们有这样的 html:

<div data-bind="foreach: list">
    <button class="btn" data-bind="text: $data"></button>
    <br/>
</div>

JS 代码如下:

$('.btn').on('click', function () {
    console.log('clicked');
});
var vm = {
    list: ko.observableArray(["first", "second"])
};
ko.applyBindings(vm);

每当您单击按钮时，都不会发生任何事情，因为按钮还没有 html 标记。
要解决这个问题，您有两个选择。

1. 定义您的click applyBindings 之后的处理程序.
2. 使用 jQuery .live或.on当选择器匹配 $('.icon.arrow') 时绑定(bind)您的处理程序

像这样:

$(document).on('click', '.btn', function () {
    console.log('clicked');
});

希望我的理解是对的!