Javascript – Backbone.js View Click event selector syntax

backbone.jsjavascript

I'm trying to add an event to my backbone view I have setup. I want to bind the event to an div in the element of view but I want to select that div by two classes.

Example:

<div id="mainContent">
     <div class="small docs"></div>
</div>


        Views.Main = Backbone.View.extend({
            el: $("#mainContent"),

            events: {
                "click .small .docs": "renderActiveDocs"

            },

                        initialize: function () {...}
                });

Having it set up this way doesn't seem to fire that click. If I remove either of the classes and just leave one, then it works.

However the class of this div will change from "small" to "large" and I don't want the click event to fire in that case.

Am I missing something in the syntax or is this not possible?

Best Answer

click .small.docs

No space between the two classes.

Reference: second example here: http://api.jquery.com/class-selector/

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – Event binding on dynamically created elements

As of jQuery 1.7 you should use jQuery.fn.on with the selector parameter filled:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

Prior to this, the recommended approach was to use live():

$(selector).live( eventName, function(){} );

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

$(selector).live( eventName, function(){} );

... can be replaced with the following on() signature:

$(document).on( eventName, selector, function(){} );

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document. Though bear in mind document may not be the most efficient option.

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Any parent that exists at the time the event is bound is fine. For example

$('.buttons').on('click', 'button', function(){
    // do something here
});

would apply to

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

Best Answer

Related Solutions

Javascript – How to detect a click outside an element

Javascript – Event binding on dynamically created elements

Related Topic