Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Backbone scroll event not firing

Backbone scroll event will not fire. The click event and jquery attached scroll works. Here's a fiddle as well: http://jsfiddle.net/cX2UV/

js

var TView = Backbone.View.extend({        
    events: {
        'scroll .content': 'loadMore',
        'click .code': 'codeClick'
    },

    loadMore: function() {
        this.$el.append('<p>backbone scrolling</p>');
    },

    codeClick: function() {
        this.$el.append('<p>clicking</p>');
    }
});

new TView({ el: '.target' });

$('.content').scroll(function(){ $('.target').append('jq scrolling...'); });

html

<div class="target">
<div class="content">
    <div>
        <span class="text">text</span>
        <span class="term">termmm</span>
        <span class="codes"><span class="code">12345</span></span>
    </div>
    <div>
        <span class="text">text</span>
        <span class="term">termmm</span>
        <span class="codes"><span class="code">12345</span></span>
    </div>  
</div>
</div>

css

body {margin:1em;}
.content {background:#EEE; height: 200px; overflow: scroll;}
.code{color:#00c}
like image 330
ryan Avatar asked Nov 20 '12 19:11

ryan


Video Answer


1 Answers

When binding events to a view with a selector Backbone uses jQuery's delegate. As noted in an answer to this question, the scroll event doesn't bubble up so the handler can't respond to it.

like image 72
freejosh Avatar answered Oct 18 '22 21:10

freejosh