0

jQueryで同じフォームIDで動的に作成された複数のフォームがある場合、送信イベントを処理する最良の方法は何ですか?

これまでのところ、この行により、jQuery は最初のフォームのみを処理するようになります。

$("form#noteform").submit(function(){
  // do stuff
});

正しい投稿値を取得するには、特定のフォームの送信を実際にキャッチする必要があるため、やや混乱します。したがって、フォームのセレクターは一意である必要があります。

すべての送信をリッスンし、後で送信を開始したのが正しいフォーム ID であるかどうかを特定するにはどうすればよいですか?

4

8 に答える 8

4

同じIDを持つ複数の要素を持つことは無効なHTMLであるため、IDを使用してこれを行うための最良の方法はありません。

代わりに、フォームには一意のIDがありますが、クラス名を共有することをお勧めします。その後、最初のIDを取得する必要がある場合は、IDを直接使用するか、クラスとjquery：firstセレクターを使用できます。

$('form.className:first').submit(function(){
  stuff();
});

-編集-どのフォームが送信されたかを識別する問題に実際に対処しようとしています。この場合も、このソリューションは一意のフォームIDに依存しています

$('form.className').submit(function(){
  switch( $(this).attr('id') ){
    case 'form1id':
      submitForm1();
      break;
    case 'form2id':
      submitForm2();
      break;
    default:
      stuff()
      break;
  }      
});
于 2009-05-07T14:40:05.530 に答える
1

動的に追加されたフォームを使用しているlive場合は、jQueryの関数を使用する必要があります。

  $('.submit').live('click', function(e) {

それ以外の

  $('.submit').click(function(e) {

submitこれにより、新しいボタンが動的に追加された場合でも、クリックコールバックがクラスのボタンにバインドされます。

PSこれについてご迷惑をおかけして申し訳ありませんが、自分の質問に対する新しい回答に追加する説明は、回答として追加するのではなく、元の質問に追加する必要があります。それらは技術的には答えではありません。

于 2009-05-07T18:14:02.693 に答える
0

jQueryで同じフォームIDを使用して動的に作成された複数のフォームがある場合、送信イベントを処理するための最良の方法は何でしょうか？

idが'noteform'の場合、そのidを持つすべてのフォームを選択するには：

jQuery('form[id="noteform"]')

注意：一意でないIDを持つ複数のHTML要素（フォームを含む）を持つことは最善のアイデアではない場合があります。

どうすればすべての送信を聞くことができますか？

イベントをそのイベントにバインドできます。

jQuery('form[id="noteform"]').submit(function(e){});

後で、送信を開始したのが正しいフォームIDであるかどうかを識別しますか？

セレクターを使用することにより、（私の意見では）正しいIDのフォームを持つことが保証されますが、このオブジェクトを使用して、送信イベントでフォームのIDを確認できます。

jQuery('form[id="noteform"]').submit(function(e){
  if(this.id=='noteform') {/* do interesting stuffs */}

  // use .index function to determine the form index from the jQuery array.
  alert('index='+jQuery('form[id="noteform"]').index(this));
});

私がそれらをテストするために使用するPOCコードスニペット（ソリューション）に興味がある場合は、次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script type="text/javascript" src="jquery-1.3.2.js"></script>

</head>

<body>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<script type="text/javascript">
/* <![CDATA[ */

// test for selection
jQuery('form[id="noteform"]').each(function(i){
  alert('noteform #' + i); //
});

// test for submission
jQuery('form[id="noteform"]').submit(function(e){
  if(this.id=='noteform'){
    alert('index='+jQuery('form[id="noteform"]').index(this));
    return false; // cancel submission
  }
});

/* ]]> */
</script>

</body>

</html>

ありがとう。

于 2009-05-08T13:30:18.833 に答える
0

イベントでいくつかの問題が発生しましたsubmit。フォームのボタンクリックイベントにイベントを添付することをお勧めします。また、可能であれば、htmlで同じIDを使用しないことをお勧めします。それは一般的に悪い習慣です。

例えば：

次のhtmlで：

<form id="questionForm" action="question/save/1234" method="post">>
   <input type="text" id="question1" />
   <input type="text" id="answer1" />
   <input type="submit" id="saveQuestion1" class="submit" value="Save" />
</form>
<!-- more forms -->
<form id="questionForm" action="question/save/4321" method="post">
   <input type="text" id="question2" />
   <input type="text" id="answer2" />
   <input type="submit" id="saveQuestion2" class="submit" value="Save" />
</form>

代わりにこれを使用できます：

$(document).ready(function() {
  $('.submit').click(function(e) {
    // load the form with closest (jQuery v1.3+)
    var form = $(this).closest('form');
    // check form
    if (!isValid(form))
    {
      e.preventDefault();
    }
    // or if you make the buttons of type button and not submit
    if (isValid(form))
    {
      form.submit();
    }
  });
});
于 2009-05-07T14:56:07.897 に答える
0

私が実際に考えていた最後のオプションは、すでにそのコードを別の場所で使用していたからです

それが本当にうまくいくなら、それは素晴らしいことです

フォームが有効かどうかも確認してください。オフの代わりに使用できます

if (!isValid(form))  

if form.id="tbnoteform" then
submit the form

私はまだこれをやめようとしています

セレクターステートメントを使用してオブジェクトインスタンスを作成した後でも、キーワード this を毎回使用できますか?? フォームはフォームから離れたオブジェクトインスタンスになりましたか?

リチャード

于 2009-05-07T15:15:25.557 に答える
0

私は自分の答えを完全に作り直しました...それはよりクリーンでシンプルで、動的に追加されたフォームでも機能します! ;-P

<script language="javascript">
$(function() {
    $('form').live('specialSubmit',function() {
        // do stuff... the form = $(this)
        alert($(this).serialize()); // to prove it's working...
    });
    bind_same_id_forms('noteform');
});
function bind_same_id_forms(id) {
    $('form').die().live('keypress',function(ev) { 
        if(ev.keyCode == 13 && $(this).attr('id') == id) {
            $(this).trigger('specialSubmit');
            return false;
        }
    }).children(':submit,:image').die().live('click',function(ev) {
        if($(this).attr('id') == id) {
            $(this).trigger('specialSubmit'); 
            return false;
        }
    });
}
</script>

HTML の例:

<form id="noteform" action="question/save/1234" method="post">
   <input type="text" name="question" />
   <input type="text" name="answer" />
   <input type="submit"value="Save" />
</form>
<!-- more forms -->
<form id="noteform" action="question/save/4321" method="post">
   <input type="text" name="question" />
   <input type="text" name="answer" />
   <input type="submit" value="Save" />
</form>
于 2009-05-07T17:55:34.923 に答える
0

新しいメモを作成するコード例を修正しました

これは、submit イベントを、load イベントから離れたコールバック関数内で新しく追加されたフォームにもアタッチします。

何らかの理由で、他の例ではうまくいかなかったので、これは一歩前進です。

このようにすることの欠点についてはまだわかりません!! この問題に関するコメントをお待ちしています。例をご覧になりたい場合は、

目的とコメント: newnote 関数は 2 つの引数を取ります

-: index = ページに既に存在するメモの数

-: tbnoteid = データベースからのメモ ID

インデックスは、表示されたメッセージのカウンターのようにも機能するはずです。

たとえば、カウンターが 10 を超えた場合、最後のメッセージが最初に 1 つ (タイムスタンプが最も古いメッセージ) の基準のメッセージをページとデータベースから削除することになっています (ロジックは後で追加されます)。

フォームが実行できる唯一のアクションは、データベースからメッセージを削除し、ページからそれ自体 (コンテナー div) を削除することです。静的な目的のために、最初にフェードアウトします。

関数は、メッセージ自体のように、より多くの引数を取ることができます。ユーザーがページに入ると、データベースからメッセージがある場合はそれをプルする別の関数から newnote 関数を呼び出す必要があります。

この例のように、新しいメモを生成するリンクも別のフォームからのアクションに置き換えられます

$(document).ready(function(){
 $('a[name=modal]').click(function(e) {  //the selector is for testing purpose 
        //Cancel the link behavior   
        e.preventDefault();   
       var $aantal = $("div.pane").size()
    newnote($number+1,1); // second argument is supposed too come from the database


    }); 

    function newnote(index,tbnoteid) {


    $("div.wrapper:last").after('<div class="wrapper"></div>'); 
    $('.wrapper:last').load('tbnote.html .pane', function() { 
    $(".pane:last").prepend("testmessage");  //testpurpose
    $('.pane:last #frmnoteid').val(tbnoteid);

    $(this,".frm" ).attr('id' , index);
    var $id = $(this).attr('id'); ");  //testpurpose
    $('.frm:last').submit(function(){ 
        $.post("tbnotes.php",{
        noteid: $("#frmnoteid").val(),
        actie: "verwijder",
        tijd: timestamp}, function(xml) {
        addMessages(xml);
        });

     alert("Hello mijn id = " + $id );"); //testpurpose 
    $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
    $(this).parents(".wrapper").remove();
    return false;

            });
        });

}
于 2009-05-07T17:57:45.667 に答える