提交和点击的区别答案

【问题标题】：The different between submit and click提交和点击的区别
【发布时间】：2010-03-06 13:18:30
【问题描述】：

看看这个：

$('form).submit(function (event) {
        $(':input.required').trigger('blur');
        var num = $('.warning', this).length;
        alert(num);//Focus here!
        if (num) {
            event.preventDefault();
        };

    });

如果需要的文本框有5个为空，则点击提交按钮[ID:button1]时，num为5。触发5个文本框后，发现5个错误，代码运行良好。

也是同一个按钮[ID:button1]

$('#button1').click(function (event) {
        $(':input.required').trigger('blur');
        var num = $('.warning', this).length;
        alert(num); //Focus here!
        if (num) {
            event.preventDefault();
        };

    });

在这个例子中，num 为 0。似乎触发功能没有很好或没有及时。

谁能告诉我为什么？非常感谢！

【问题讨论】：

标签： jquery forms button submit this

【解决方案1】：

我相信这是对“this”的引用。这是 JavaScript 和许多其他语言中的special variable。当您在第一个示例中使用它时，它会在表单 (this) 中搜索具有“警告”类的子元素。在第二个示例中，它在按钮中搜索子元素。你可以使用

var num = $('.warning').length;

查找页面上具有该类的所有元素。如果您需要将查找限制为表单的子项，请尝试

var num = $('form#myformid').find('.warning').length;

您的第一个示例，附加到表单的提交操作，应该就足够了。单击按钮将引发提交事件，因此第二个事件处理程序是多余的（如果用户通过在字段中按 Enter 提交表单，则不会触发）。

【讨论】：

【解决方案2】：

在您的 2 示例中，this 的上下文不同：

 var num = $('.warning', this).length;

按钮内没有警告元素，所以第二个例子中计数为0。

最好在两个地方都使用这个进行直接比较：

var num = $('form .warning').length;

【讨论】：

【解决方案3】：

在您的第二段代码中，您正在调用

$(':input.required').trigger('blur');

在您的按钮 (#button1) 上。您应该引用您的表单，因为现在它正在该按钮内寻找输入。

【讨论】：