jQueryを使用して動的に入力を追加したフォームをシリアル化する方法は？

Question

私は似たような質問に答える多くの質問を読んだが、まだそれを把握することはできない。

私は2つの既存の隠し入力が原因セーブ前にドキュメントの読み込み時に設定することができ、単に

<form id="edit-items" name="edit-items" onsubmit="saveItems();"> 
    <input type="submit" value="Save"> 
    <input class="item" id="ei81" type="hidden" name="i[81]" value="1"> 
    <input class="item" id="ei124" type="hidden" name="i[124]" value="1"> 
</form> 

のような単純なHTMLフォームを持っています。 イメージ（メニューのようなもの）があります。彼らがクリックされた場合は、対応する非表示の入力がフォームに追加されます。

<img id="i37" class="clickable-item" src="items/i37.gif" title="item name" onclick="addItem(37,1)" /> 

のaddItem機能：すべての画像をクリックした後、正しい動作します

function addItem(id,n) { 
    var zitem = $("#e"+id); 
    if (0 in zitem) { 
    if (zitem.val() > 0) { 
     var newcnt = parseInt(zitem.val()) + n; 
     if (newcnt <= 0) { 
     zitem.remove(); 
     } 
     else { 
     zitem.val(newcnt); 
     } 
    } 
    } 
    else if(n == 1) { 
    var iform = $("#edit-items"); 
    iform.append("<input class=\"item\" id=\"e"+id+"\" type=\"hidden\" name=\"i["+id+"]\" value=\"1\">"); 
    } 
} 

この部分、私のフォームは

のように見えます

<form id="edit-items" name="edit-items" onsubmit="saveItems();"> 
    <input type="submit" value="Save"> 
    <input class="item" id="ei81" type="hidden" name="i[81]" value="1"> 
    <input class="item" id="ei124" type="hidden" name="i[124]" value="1"> 
    <input class="item" id="ei37" type="hidden" name="i[37]" value="1"> 
</form> 

これは私が欲しいものです。しかし、送信ボタンを押すと最初の2つの要素（動的に追加されていない要素）のみが送信されます。

今、.bindハンドラと.liveハンドラについてたくさん読んでいますが、明らかにいくつかの点がありません。

$(".clickable-item").live("click", function() { 
    addItem($(this).attr("id"),1); 
}); 

しかし、IDは、必要とされる転送されていないが（それゆえノー正しい入力：私は、画像にonclick属性を削除するために、彼らは新しい入力を引き起こしているので、それらに.liveをバインドしようとしました追加されます）。私は、.liveはハンドラを要素にバインドするのではなく、イベントにバインドすることを学びました。

ライブハンドラにクリックされた要素を渡すことは可能ですか？ イメージは.liveによって監視されるべきですか、それとも別のものにバインドされるべきですか？

最後に私が学んだもう一つの質問は、動的に追加されているので、入力が.liveによって監視されるべきことです。しかし、私はどんな種類のイベントを付けるのですか？入力自体はクリックされません。

私は自分の頭を砕いて迷っているので、本当に助けてもらえます。 live()^[docs]について

事前のおかげで、 ポール

Answer 1

：thisがクリックされた要素を参照するので、あなたはaddItem(this, 1)でaddItemにそれを渡すことができます。コードのこの部分はうまくいくはずです。

イメージを動的に追加または削除しない場合は、liveを使用する理由はありません。 click()^[docs]を使用することができます（HTMLではonclickを使用しないでください）。

---

しかし、私は別の問題を参照してください。

画像IDがi37です。 $(this).attr("id")はこの値を返します。

addItem関数では、この値を使用して文字列の連結を実行します。結果は$("#ii37")になります（2つのiに注意してください）。

作成する入力要素のIDはii37で、i37ではありません。

例のように他の要素（たとえばi37）と一致するように修正すると、同じID（入力要素と画像）を持つ複数の要素があるため、問題が発生します。画像が階層内の入力フィールドの前にある場合、$("#i37")は常に画像を選択し、画像に.val()を呼び出すことはできません。

コードの全体的な目的と実行したいことがわからないため、これを改善する方法については何も提案することはできません。おそらく、画像の接頭辞と入力フィールドIDを変更するだけで十分でしょう。

---

私は.liveは任意の要素ではなくイベントにハンドラを結合しないことを学びました。

これは間違っています。 .live()は、イベントハンドラをドキュメントルートにバインドします。イベントは、キャンセルされなければ、DOMツリーをバブルアップし、最終的にルートに到達します。そこで、event.target^[docs]プロパティを調べて、クリックされた要素を特定します。