Question

我必须在搜索表单上阻止空搜索sumbit。表单没有提交按钮，所以我必须阻止输入

html代码：

表1

 <form method="get" class="search-form" id="searchform" action="http://example.com" >   
                <input class="text" name="s" id="s" type="text" />       
    </form>

表格2

<form action="http://example.com" class="search-form" method="get">             
    <input type="text" name="s" class="text">                           
</form>

javascript代码

// Im sure this funcions returns the 2 different forms, 
var searchForms = getElementsByClass('search-form');    
    for(i in searchForms)
    {   
        if (searchForms[i].addEventListener) 
        {
            searchForms[i].addEventListener("submit", function(e)
               {
                preventSubmit(e); // no problem here
                console.log(i) // ALWAYS LOGS 1         
               });
        } //I also implemented the ie code, but not necessary here, is the same as above for addEventListener

    }

每次我提交任何表格时，在控制台中写1，任何的想法？感谢所有

Answer 1

你需要一个闭包：

var searchForms = getElementsByClass('search-form');    
    for(i in searchForms)
    {   
        if (searchForms[i].addEventListener) 
        {
            (function(i) { // Closure start <-- We make our own static variable i 
                searchForms[i].addEventListener("submit", function(e)
                   {
                   preventSubmit(e); // no problem here
                   console.log(i)        
                   });
            })(i); // Closure end.
        }
    }

这是因为在您的循环（for i in searchForms）i之后将是最后一个值（=== 1）。您需要使闭包的静态值为i。

在此处查看有关闭包的更多信息：

How do JavaScript closures work?

Answer 2

在提交之前不会执行回调 - 此时i的值为1.闭包以immediately-executing function的形式允许我们捕获{{1}的变化值并将其副本传递给我们的函数。

另外

1）除了在某些情况下，通常避免数组上的i循环。使用传统的for-in循环。例如，如果您使用通过ECMA5 for方法选择表单的现有for-in，您将获得意外结果（循环的四次迭代，而不是两次）

2）您不必要地重新评估在循环的每次迭代中使用哪种事件注册机制。在外面决定一次。

querySelectorAll()

Answer 3

这是因为关闭pls看到类似的链接

Jquery dynamic buttons dialog for in loop doesn't populate function

javascript addEventListener对于两个不同的元素冲突

3 个答案: