Access click event outside the el in backbone view

Question

How can i access click event outside the el scope.

What i have : HTML :

<div class="right_btn"></div>
<div id="template_loader">
    <!-- HTML template goes here which contain form inputs-->
    <input type="text" class="forgot_password_email" name="forgot_password_email"/>
</div>

View :

var ForgotPasswordView = Backbone.View.extend({
    el: "#template_loader",
    initialize: function () {
        console.log('Forgot Password View Initialized');
    },
    render: function () {
        blockPage();
        var that = this;  

        $.get(App.baseUrl + 'templates/forgot-password-view.html', function (data) {
            template = _.template(data, { });
            that.$el.html(template);
            unblockPage();
        }, 'html'); 
    },
    events:{
        'click .right_btn':'forgotPasswordSubmit', //Doesn't fire as its outside of el
    }, 
    forgotPasswordSubmit: function(e){
        alert($(".forgot_password_email").val());
        e.preventDefault();
    }
});

Ive gone through the following :

Backbone.js views - binding event to element outside of "el"

Howto bind a click event in a Backbone subview

but doesn't really help me get it to work.

How can i get the click event of .right_btn inside the view. I cannot change the template structure to include the right_btn inside theel. Is here anyway to bind the outside element or recognize the click event inside a backbone view itself.

Answer 1

Unfortunately, there is no way of doing this using just the backbone library. Backbone expects the view to only handle the events within it's specific DOM element.

It would be best, if possible, to refactor your code so that you do not have to break these conventions. Blurring the boundary of a view can give you difficulty later on if you need to reposition the view and it has dependencies on it's parent environment.

If possible, create a parent view that contains the HTML you have listed above, and use that view to bind to the event and submit the form of it's child view.

If you have no choice but to do things this way, then I would advise using jQuery 'on' to bind to the event.

// Put this in your view to ensure that it is only bound when the form is
// added to the page. You could substitute 'on' for 'one' if you don't want
// the binding to maintain after the first submission.
var submitForm = function(){
  $('#template_loader form').submit();
};
$('.right_button').on('click', submitForm);