提交表单事件不会触发

时间:2014-10-24 17:34:16

标签: javascript backbone.js event-handling form-submit

我开发了第一个主干RESTfull应用程序。我有以下观点:

var app = app || {};

app.AssessorsCollectionView = Backbone.View.extend({
    el: '#assessors',
    tagName: 'table',

    events:{
        "submit form": "searchAssessors"
    },

    initialize: function() {
        this.collection = new app.AssessorsCollection();
        this.collection.fetch({reset: true, data: $.param({ online: false}) });
        this.render();

        this.listenTo( this.collection, 'reset', this.render );
    },

    render: function() { /// },

    renderRegion: function( item ) { /// },

    searchAssessors: function( e ) {
        e.preventDefault();

        this.collection.remove();

        console.log("EVENT");
    }
});

这是我的HTML表单:

<form id="form-search-assessors" class="form-horizontal" role="form">
    .........

    <input id="search-assessors-button" class="btn btn-lg btn-success btn-block" type="submit" value="Search" />
    <!--<button id="search-assessors-button" class="btn btn-lg btn-success btn-block" type="submit">Search</button>-->
</form>

我把断点放到searchAssessors上,但它不起作用。另外,我在控制台中看不到任何消息。

3 个答案:

答案 0 :(得分:0)

尝试将活动更改为"submit #form-search-assessors": "searchAssessors"

答案 1 :(得分:0)

您是否初始化了视图?,因为只是代码中的一个片段,我删除了一些内容和注释,这应该可行。

由于

HTML

<div id="assessors">
    <form id="form-search-assessors" class="form-horizontal" role="form">
       <input id="search-assessors-button" class="btn btn-lg btn-success btn-block" type="submit"            value="Search" />
   </form>
<div>

JS

AssessorsCollectionView = Backbone.View.extend({


    el: '#assessors',
    tagName: 'div',

    events:{
        'submit form': 'searchAssessors'
    },

    initialize: function() {
        this.render();
    },

    render: function() {  },

    searchAssessors: function( e ) {
        e.preventDefault();
        console.log('EVENT');
    }

});

view = new AssessorsCollectionView();

答案 2 :(得分:0)

解决我的问题:

$( "form#form-search-assessors" ).submit($.proxy(function(e) {
    e.preventDefault();
    console.log(this);

    this.collection.fetch({reset: true, data: $.param({ online: true}) });
    this.render();
}, this));

来源是:https://stackoverflow.com/a/9813760/1756750