jqueryを使用してdiv関数を使用してjavascriptに埋め込まれたフォームを提出しようとしました

Question

javascriptに埋め込まれたフォームを、囲むdivに付けられたクリック機能を使用して送信しようとしています。私は、インラインスタイルシートを使用していないものを表示するようにボタンタイプを設定しましたが、その周りに境界線を設定するフォームをタップすると、何も起こりません。これは私の試みです：

これは、フォームとJavaScriptコードで、これは私の挑戦は、div要素はそれを提出してみましょうタップであるjQueryのコード

$(".containers").click(function() { 
     $(this).closest("form").submit(); 
}); 

あり、その中に

function fetchAllActiveUsers() { 
    ... 
    xhr.onload = function (response) { 
     try { 
      if (xhr.status === 200) { 
       ... 
       var users = ''; 
       ... 
       for (var i = 0; i < json.length; i++) { 

       users += '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>' + json[i].email + '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="'+json[i].email+'" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="'+sessionVar+'" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'+ json[i].complaints +'</div><hr style="margin:1px; padding:0">'; 

       } 

       active_users.innerHTML = users; 
       } else { 
       alert('Request failed. Returned status of ' + xhr.status); 
      } 
     } catch (e) { 
      console.log(e); 
     } 
    }; 
    xhr.send(); 
} 

を組み込みフォームは動作しません。

親切に助けて

Answer 1

最初に、まだ存在しない要素にイベントをバインドすることはできません。第二に、子孫ではなく、祖先が最も近い。

だからあなたはイベントの委任を使用して）（解答作品以上

$(document).on("click", ".containers", function() { 
     $(this).find("form").submit(); 
}); 

Answer 2

を見つける必要があり、それは良いことだが、あなたはただ一つの要素のための委任を使用していない場合、それはよりパフォーマンスになり、代表団はのためのより良いですイベントリスナーを複数の要素にアタッチする必要がある場合 上記の答えで述べたように、DOMに追加されていない要素にイベントをバインドすることはできません。つまり、実行後すぐにフォームタグがDOMに追加されます。active_users.innerHTML = users; したがって、

xhr.onload = function (response) { 
    try { 
     if (xhr.status === 200) { 
      ... 
      var users = ''; 
      ... 
      for (var i = 0; i < json.length; i++) { 

      users += '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>' + json[i].email + '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="'+json[i].email+'" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="'+sessionVar+'" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'+ json[i].complaints +'</div><hr style="margin:1px; padding:0">'; 

      } 

      active_users.innerHTML = users; 
      // Adding event listener to submit the form 
      var formEl = document.querySelector('.containers form'); 
      formEl.addEventListener("click", function (e) { 
       // Submitting the form 
       e.currentTarget.submit(); 
      }, false); 
      } else { 
      alert('Request failed. Returned status of ' + xhr.status); 
     } 
    } catch (e) { 
     console.log(e); 
    } 
};