Backbone Marionette onDomRefresh jquery-ui click multiple firing

Question

I have defined a Marionette View, and I need to reflect the model change event. I have my initialize function like so:

initialize: function(){
    _.bindAll(this,"render");
    this.model.on('change',this.render);
},

Later, I have defined my jquery-ui element initializers in onDomRefresh method. It is a draggable and resizable element, which can be writeable when you click on it. When clicking outside the element, the text is saved.

onDomRefresh: function(){
    var self = this;
    if(this.$el.resizable()){
        this.$el.resizable('destroy');
    }
    this.$el.resizable({ handles: "n, e, s, w, se, sw, nw, ne" });
    this.$el.on('resize', function (e) {
        e.stopPropagation();
    });

    this.$el.draggable().click(function(e){
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $(this).draggable( "option", "disabled", true );
        $(this).attr('contenteditable','true');
        $(this).css({cursor:'text'});
        $(this).css({opacity:'100'});
    }).blur(function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).attr('contenteditable','false');
        $(this).css({cursor:'move'});
        self.textchange(); //update and save the text in the model
    });
 }

The problem comes, when the model has nested some model change events, and the click function is firing more and more times. I have been looking for jquery click event solutions, and none of them seems to work for me.

Tried solutions:

this.$el.draggable().unbind("click").click(function(e){});
this.$el.draggable().off("click").on('click',function(e){});
this.$el.draggable().one('click', function(e){});
//with jquery sparkle
this.$el.draggable().once('click', function(e){});

I also notice that sometimes onDomRefresh method fires two times. Don't know how to fix that. Any ideas are more than welcomed.

Answer 1

I have added this call at the beggining of onDomRefresh() function, which unbinds all the events on the element:

this.$el.unbind();

Now, the click event fires just once after rerendering the view.