Why does my simple backbone view click event not firing?

Question

here is my scenario of backbone view

var TreeNode = Backbone.View.extend({
        tagName : "span",
        className : "ndelem dirnode",
        events : {
            "click" : "selectNode",
        },
        initialize : function() {
            _.bindAll(this, "render", "selectNode");
            $(this.el).append(this.model.get("fname")).attr({
                "data-cid" : this.model.cid
            });

        },
        render : function() {
            this.delegateEvents();
            return this;
        },

        selectNode : function(e) {
            e.stopPropagation();

            this.model.set({
                isOpened : true
            });
        }
    });

Main view

var TreeZone = Backbone.View.extend({
        el : $("#nodes"),
        initialize : function() {
            this.collection.bind("add", this.list, this);
        },      
        getHtml : function(elem) {
            var newItem = $("<div/>").append(elem);
            return newItem.html();
            newItem.remove();
        },
        getSelectedItem : function() {
            var selectedItem = $('#nodes').jqxTree('selectedItem');
            if (selectedItem != null)
                return selectedItem.element;
            else {
                var treeItems = $('#nodes').jqxTree('getItems');
                var firstItem = treeItems[0];
                return firstItem.element;
            }
        },
        list : function(file) {

            var node = new TreeNode({
                model : file
            });
            var newItem = this.getHtml(node.render().el);

            var element = this.getSelectedItem();

            $('#nodes').jqxTree('addTo', {
                html : newItem,
            }, element);
            $('#nodes').jqxTree('expandItem', element); 
        }
    });

var tree = new TreeZone({collection:dircollection});

I adding elements to the collection.

but tree node click event not firing. simply I am adding raw html to the tree node because tree doesnt support jquery object. so I am trying get html from get html function. and giving it to tree.

Answer 1

Events are bound to DOM elements but you end up working with HTML strings. You're doing this:

getHtml : function(elem) {
    var newItem = $("<div/>").append(elem);
    return newItem.html();
    newItem.remove();
},

//...
var newItem = this.getHtml(node.render().el);

So getHTML returns a string and as soon as you convert your TreeNode's el (which is a DOM object) to a string, the delegate which Back attaches to el for event handling is gone: no delegate, no events.

I can see a couple options:

1. Dig the node's <span> out of #nodes after the addTo call and use setElement to re-attach it to the TreeNode view.

2. Rearrange the structure so that you don't have TreeNode at all. If you attach a class to the node <span>s then you could let TreeZone deal with all the events; for example, if you used <span class="node"> for the nodes, then TreeZone could have this:

   events: {
       'click .node': 'selectNode'
   }
   

   And you'd have a selectNode method on TreeZone instead of TreeNode. You might need to add a data-id attribute to the <span>s so that you can backtrack from the <span> to the model.

Also, note that your newItem.remove(); in getHtml will never be executed.