jquery - .scroll() jquery 在淘汰赛自定义绑定处理程序中不起作用？

Question

我在 jQuery 中使用 Durandal (requireJS + knockoutJS)

jquery 1.10.2 + knockoutjs 2.3.0 + requirejs

即使是简单的代码也行不通

 $('#table1').scroll(function(){
      alert('');
 });

甚至淡出（）；淡入（）不工作

但每个功能都正常工作

$('.items').each(function(){ 
     $(this).css("display","none"); 
});

有什么猜测吗？谢谢

Answer 1

如果您的 DOM 是在连接该 JQuery 事件处理程序之后加载的，则它根本不会连接（例如，如果在您添加该事件处理程序之后添加了“table1”表，因为它是通过 AJAX 或类似方式加载的）。相反，您需要进行某种事件委托。最简单的方法是将事件附加到将存在的东西（文档是显而易见的），并过滤事件处理程序。例如

$(document).on('scroll','#table1', function(e) {...});

这样，由于 document 实际处理事件，因此稍后添加“table1”并不重要，因为在触发事件处理程序时会评估该过滤器。

Answer 2

问题可能在于您正在尝试滚动表格本身。滚动 div 对我有用。当您尝试移动滚动条时，您会收到警报。

ko.bindingHandlers.scrollBinder = {
  init: function(element) {
    $(element).scroll(function() {
      alert("Scroll!");
    });
  }
};

var model = function() {
  var self = {};
  self.visibleStatus = ko.observable(true);

  return self;
};

ko.applyBindings(new model());

.scrolly {
  overflow-y: scroll;
  max-height: 300px;
  width: 300px;
}
.bigblock {
  height: 800px;
  width: 300px;
  background-color: #cfc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="scrolly" data-bind="scrollBinder:true">
  <table>
    <tbody>
      <td class="bigblock"></td>
    </tbody>
  </table>
</div>