使用Knockout Js时，单击事件不会触发

Question

我有以下代码，它使用knockout.js嵌入数据绑定

  <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>

按下时，我试图让“icon arrow”处理以下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绑定之外触发“图标箭头”时，它也能正常工作。

我已经厌倦了在我的视图模型中编写一个函数，希望它会触发这个javascript，但没有运气。任何想法

Answer 1

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

为了解释它，例如假设我们有这样的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. 当选择器匹配.live
时，使用jQuery .on或$('.icon.arrow')来绑定处理程序 像这样：

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

我希望我帮到你！