Events not firing after Zurb Foundation Reveal (Modal) closes?

Question

I'm opening a Backbone view in a Zurb Foundation Reveal (Modal) section.

this.$('#ChangeIconModal').html( this.editIconView.render().el );

This works fine the first time. However, if I close it (either by clicking it, or by calling $('#ChangeIconModal').foundation('reveal', 'close') ), the click event I have set up no longer fire.

Here is how I've set up my click event:

events: { 'click button.finish': 'finish', 'click a.close-reveal-modal': 'close' }

And, regardless of how the close happens, I remove the Backbone view when I'm done with it:

this.remove();

Does anything seem obviously wrong with what I'm doing?

PS - I'm new to the whole Backbone/Zurb world, so bear with me. If you need any more information, I'll be glad to provide it, I just don't know what to provide.

Answer 1

Ahh, I figured it out. Here's what I did, in case anyone else comes across the same issue.

Here's what I had before in my view:

initialize: function() {
    // Other initialize code here...
    this.editIconView = new IconEditView({ model: this.model });
}

iconEdit: function() {
    this.$('#SubtabEditModal').html( this.editIconView.render().el );
}

However, because I called remove on it later, the reference to editIconView was no longer valid.

I had to change my code to be more like this:

initialize: function() {
    // Other initialize code here...
}

iconEdit: function() {
    this.editIconView = new IconEditView({ model: this.model });
    this.$('#SubtabEditModal').html( this.editIconView.render().el );
}

It seems to be working now. If this isn't clear, leave a comment, I'll try to help.