javascript - Backbone js button click event not firing - Stack Overflow

admin管理员组

文章数量:1310493

I have an ajax function on the initialize of the main router that seems to hinder the event of my signin button in signin.js. When I click the signin button, it doesn't perform its function, instead the browser places the inputs on the URL, (i.e. username and password). But when I remove the ajax function on the initialize, I can successfully log in.

I've included some of the codes I'm working on. Thanks

main.js

initialize: function(){
    $.ajax({
      type: "GET",
      url: "something here",
      contentType: "application/json",
      headers: {
          'someVar': something here
      },
      statusCode: {
          404: function() {
              console.log('404: logged out');
              if (!this.loginView) {
                  this.loginView = new LoginView();
              }
              $('.pagewrap').html(this.loginView.el);
          },
          200: function() {
              console.log('200');
              if (!this.homeView) {
                  this.homeView = new HomeView();
              }
              $('.pagewrap').html(this.homeView.el);
          }
      }
    });
  // return false;         
},

signin.js

var SigninView = Backbone.View.extend ({
    el: '#signin-container',
    events: {
        "click #btn-signin" : "submit"
    },
    submit: function () {
        console.log('signin');
        $.ajax({ ... });
        return false;
    }
});
var toSignin = new SigninView();
window.anotherSigninView = Backbone.View.extend({
    initialize: function() {},
    render: function() {}
});

home.js

window.HomeView = Backbone.View.extend ({
    initialize: function() {
        this.render();
    },
    render: function() {
        $(this.el).html( this.template() );
        return this;
    }
});

some html

<form id="signin-container">
<table id="tbl-signin">
    <tr>
        <td><div class="input-box"><input class="input-text" type="text" name="username" placeholder="Username"></div></td>
        <td><div class="input-box"><input class="input-text" type="password" name="password" placeholder="Password"></div></td>
        <td><input id="btn-signin" class="button" value="Sign In"></td>
    </tr>
    <tr>
        <td class="opt"><input class="checkbox" type="checkbox" name="rememberMe" value="true"><label class="opt-signin">Remember Me?</label></td>
        <td class="opt"><a class="opt-signin" href="#">Forgot Password?</a></td>
        <td></td>
    </tr>
 </table>
 </form>

I have an ajax function on the initialize of the main router that seems to hinder the event of my signin button in signin.js. When I click the signin button, it doesn't perform its function, instead the browser places the inputs on the URL, (i.e. username and password). But when I remove the ajax function on the initialize, I can successfully log in.

I've included some of the codes I'm working on. Thanks

main.js

initialize: function(){
    $.ajax({
      type: "GET",
      url: "something here",
      contentType: "application/json",
      headers: {
          'someVar': something here
      },
      statusCode: {
          404: function() {
              console.log('404: logged out');
              if (!this.loginView) {
                  this.loginView = new LoginView();
              }
              $('.pagewrap').html(this.loginView.el);
          },
          200: function() {
              console.log('200');
              if (!this.homeView) {
                  this.homeView = new HomeView();
              }
              $('.pagewrap').html(this.homeView.el);
          }
      }
    });
  // return false;         
},

signin.js

var SigninView = Backbone.View.extend ({
    el: '#signin-container',
    events: {
        "click #btn-signin" : "submit"
    },
    submit: function () {
        console.log('signin');
        $.ajax({ ... });
        return false;
    }
});
var toSignin = new SigninView();
window.anotherSigninView = Backbone.View.extend({
    initialize: function() {},
    render: function() {}
});

home.js

window.HomeView = Backbone.View.extend ({
    initialize: function() {
        this.render();
    },
    render: function() {
        $(this.el).html( this.template() );
        return this;
    }
});

some html

<form id="signin-container">
<table id="tbl-signin">
    <tr>
        <td><div class="input-box"><input class="input-text" type="text" name="username" placeholder="Username"></div></td>
        <td><div class="input-box"><input class="input-text" type="password" name="password" placeholder="Password"></div></td>
        <td><input id="btn-signin" class="button" value="Sign In"></td>
    </tr>
    <tr>
        <td class="opt"><input class="checkbox" type="checkbox" name="rememberMe" value="true"><label class="opt-signin">Remember Me?</label></td>
        <td class="opt"><a class="opt-signin" href="#">Forgot Password?</a></td>
        <td></td>
    </tr>
 </table>
 </form>

• javascript
• jquery
• ajax
• backbone.js

Share Improve this question Follow edited Jan 29, 2014 at 18:08 OneScrewLoose asked Jan 27, 2014 at 10:12 OneScrewLooseOneScrewLoose 15311 gold badge66 silver badges2222 bronze badges 11

• Can you include your HomeView code ? And where did you instantiate the SigninView ? – Rida BENHAMMANE Commented Jan 27, 2014 at 10:59
• I've added the homeView nothing fancy though. var signinView = new SigninView(); I placed it at the bottom of signin.js, if that's what you're asking – OneScrewLoose Commented Jan 27, 2014 at 11:07
• If you delete the two lines of your ajax function : $('.pagewrap').html( ... ; it still works ? – Rida BENHAMMANE Commented Jan 27, 2014 at 11:17
• well, it will lose its purpose and I wouldn't be able to test the signin button as it is in the homeView – OneScrewLoose Commented Jan 27, 2014 at 11:26
• Sorry, I thought you were using <a /> links. My answer prevents links defaults behavior. – Rida BENHAMMANE Commented Jan 27, 2014 at 15:39

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 3

You need to prevent the default behaviour of the submit button in your click handler. You can do this like so:

var SigninView = Backbone.View.extend ({
    el: '#signin-container',
    events: {
        "click #btn-signin" : "submit"
    },
    submit: function (event) {
        event.preventDefault();
        console.log('signin');
        $.ajax({ ... });
    }
});

Alternatively, you might consider using the html button element which won't attempt to submit the form it's associated with.

Ok, I figured out what's your problem :)

Here is an example that resumes your code jsfiddle/26xf4/6. The problem is that you don't call new SigninView(); (instantiate the view) hence its events are never bound.

So, in this example try to unment the ligne 43 and your code will work as expected, because when you instantiate a View (new SigninView()) its constructor calls the delegateEvents() function (you don't see this in your code, it's in the backbone.js) enabling the events you declare in your view :

events: {
    "click #btn-signin" : "submit"
},

I don't know about your HTML mockup, my best guess is that you are catching the incorrect event here. If you are submitting a form, you should catch submit form event not click #some-button. Because even if you catch click event of button inside a form and return false, the form will be still submitted because those are 2 different events

本文标签： javascriptBackbone js button click event not firingStack Overflow