包含表单标记，未调用单击功能上的提交按钮答案

【问题标题】：Inclusion of form tag, submit button on click function is not called包含表单标记，未调用单击功能上的提交按钮
【发布时间】：2011-11-18 11:01:47
【问题描述】：

我有一个像这样的简单 html 表单

<table>
    <tr><td >Topic: </td> <td>  <input type="text" name="Topic"></td></tr>
    <tr><td ><button id ="submit">submit</button></td></tr>
</table>

对于这个表单，我已经实现了主干.js，主干视图的部分代码如下所示。

AppView = Backbone.View.extend({
    events: {
    "click #submit": "SubmitForm",
    },
    SubmitForm: function(){
    topic =     $("#Topic").val();
    var subject_model = new App_Form();
    subject_model.save();
    }

我的问题是，当我在上面的 html 表单中包含表单标签时。单击“提交”按钮时，不会调用 SubmitForm 函数。而在排除表单标签时，单击提交按钮时会调用 SubmitForm 函数。

有人可以帮忙吗！

【问题讨论】：

请更新您的 html。我没有看到带有 id="submit" 和 form 元素的元素。
我的问题是，如果我包含表单标签，则不会调用 SubmitForm 函数。

标签： javascript backbone.js

【解决方案1】：

您应该在SubmitForm 中return false; 以防止实际提交。

var AppView = Backbone.View.extend({
    events: {
        "click #submit": "SubmitForm",
    },
    SubmitForm: function(){
        topic = $("#Topic").val();
        var subject_model = new App_Form();
        subject_model.save();
        return false;
    }
});

【讨论】：

看起来很危险，你应该使用event.preventDefault() 而不是return false
@chemoish 为什么？在您回答之前，请查看event.preventDefault() vs. return false。只是一小段摘录：“来自 jQuery 事件处理程序的return false 实际上与在传递的jQuery.Event 对象上调用e.preventDefault 和e.stopPropagation 相同”。 Backbone 正在使用 jQuery 调度事件。
@avrelian 我知道它的作用。在这种情况下 e.stopPropagation() 有什么意义（如果人们不理解它的作用，则返回 false 可能很危险）？您所暗示的问题是表单实际上是提交到特定 URL 而不是执行 SubmitForm()...所以您想阻止默认行为...更彻底的答案是将事件更新为改为“提交”事件（防止触发点击和提交事件），除了在按钮上明确定义 type="submit" ......并帮助该人不定义全局变量。跨度>

【解决方案2】：

检查以确保您在Backbone.View 中定义了el，并且事件映射中的选择器在el 的范围内。

如果事件没有经常被绑定，那是因为您未能提供范围选择器。

【讨论】：