.scroll() jquery is not working within knockout custom binding handler?

Question

I use Durandal (requireJS + knockoutJS) with jQuery

jquery 1.10.2 + knockoutjs 2.3.0 + requirejs

even a simple code won't work

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

even fadeOut(); fadeIn() are not working

but EACH function is working properly

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

any guess? thanks

can you come up with a fiddle sort of explains the issue . by look , it should work all i can say if your are having id's,scroll bar visible everything at right place . — super cool, Aug 06 '15 at 11:45
@super cool: I tried to recreate the scenario using jsFiddle. but then it works (though i only use knockoutjs and jquery). still can't make it work within my project. Is it possible that requireJS gave a different instance of $(jquery)? ???? this is the link http://jsfiddle.net/0t3mLmj7/1/ — VJPPaz, Aug 06 '15 at 15:52

score 0 · Answer 1 · answered Aug 06 '15 at 12:03

If your DOM is being loaded after that JQuery event handler is wired up, it won't wire up at all (e.g. if the 'table1' table is added after you've added that event handler because it's loaded via AJAX or similar). Instead, you'll need to do some kind of event delegation. The easiest way to do this is to attach the event to something that will exist (document is an obvious one), and filter the event handler. e.g.

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

That way, because document actually handles the event, it doesn't matter that 'table1' is added later as that filter is evaluated at the time the event handler is fired.

score 0 · Answer 2 · answered Aug 06 '15 at 20:05

It may be that the problem is you're trying to scroll a table itself. Scrolling a div works for me. You'll get an alert when you try to move the scrollbar.

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>

.scroll() jquery is not working within knockout custom binding handler?

2 Answers2