Question

看看这个：

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

    });

如果有5个必需文本框为空，则单击提交按钮[ID：button1]时，数字为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.看起来像触发器功能不能正常工作或及时。

有人可以告诉我为什么吗？非常感谢你！

Answer 1

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

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

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

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

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

Answer 2

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

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

按钮中没有警告元素，因此第二个示例中的计数为0。

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

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

Answer 3

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

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

按钮上的

（＃button1）。您应该引用您的表单，因为现在它正在寻找该按钮内部的输入。

提交和点击之间的差异

3 个答案: