0

検索フォームで空の検索が送信されないようにする必要があります。フォームには送信ボタンがないため、入力を防止する必要があります。

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 と表示されます。

4

3 に答える 3

4

閉鎖が必要になります：

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。

クロージャの詳細については、こちらをご覧ください。

JavaScriptクロージャはどのように機能しますか？

于 2012-07-06T18:06:23.557 に答える
1

コールバックは送信まで実行されません - その時点までに の値iは 1 です。クロージャーは、すぐに実行される関数の形式で、のさまざまな値をキャプチャして、iそのコピーを関数に渡すことができます。

また

1) 特定の状況を除いて、通常for-inは配列に対するループを避けます。従来forのループを使用します。for-inたとえば、ECMA5 メソッドを介してフォームを選択してプレゼントを使用する場合querySelectorAll()、予期しない結果が得られます (ループの 2 回ではなく 4 回の反復)。

2) ループの反復ごとに使用するイベント登録メカニズムを不必要に再評価しています。一度決めて、外へ。

//get forms
var searchForms = getElementsByClass('.search-form');

//initialise event registration depending on browser
var addEvent = window.addEventListener ? function(el, evt, func, bubble) {
    el.addEventListener(evt, func, bubble);
} : function(el, evt, func) {
    el.attachEvent('on'+evt, func);
};

//bind submit events
for (var i=0, len=searchForms.length; i<len; i++) {
    (function(i) {
        addEvent(searchForms[i], "submit", function(evt) { alert(i); preventSubmit(evt); }, false);
    })(i);
}
于 2012-07-06T18:32:08.270 に答える
0

これは閉鎖のために起こっていますplsは同様のリンクを参照してください

ループ内のJquery動的ボタンダイアログが機能に入力されない

于 2012-07-06T18:08:21.573 に答える