2

私はjqueryが初めてで、論理エラーを起こしていると100％確信していますが、それを見ることができません。基本的に、ユーザーがフィールドにアイテムを入力すると、フィールドを複製して、さらに情報を追加できるようにします。私が取り組んでいる例では、兄弟とその年齢のリストを作成しようとしています。

これが私のコードです：

$(document).ready(function () {
    $("input[name='age']").on('keydown', function() {
    //is it the last input?
    if (this == $("input[name='age']:last", this.form)[0]) {
        //insert an empty clone of the current input
        //$(this).after($(this).clone(true).val(''));
        $('.family').clone().insertAfter(".family");
    }

html は次のとおりです。

<form>
<div class="family">
    <input name="age" value=0>  <input name="sibling" value="name?">
    <hr />
</div>
</form>

使用する$(this).after($(this).clone(true).val(''));と機能しますが、1つのフィールド(年齢1)のみを複製するため、それを置き換えて$('.family').clone().insertAfter(".family");divクラスを複製しようとしましたが、フィールドは1回だけ複製されます。最初の兄弟情報を入力し始めると、2 番目のフォームが表示されますが、2 番目のフォームで入力を開始すると、その後は何も表示されません。

単なる推測ですが、ifステートメントが一致していないため、クローンが作成されていないと思います(私は新しいので、この考えは間違っている可能性があります)。これが事実である場合、入力フィールドの同じ名前を複製しているためinput[name='age']:last、最後の年齢フィールドと一致する必要があるため、混乱しています..わかりません。

私が間違っていることは何か分かりますか？

4

2 に答える 2

4

keydownイベント ハンドラーに将来の要素 (つまり、<div>複製して挿入する新しい要素)も記録させる必要があります。

変化する

$("input[name='age']").on('keydown', function() {

に

$('form').on('keydown', 'input[name="age"]', function () {

すなわち（いくつかの修正/最適化も含む）

$('form').on('keydown', 'input[name="age"]:last-child', function() {

    var _p = $(this).parent('.family');

    // insert an empty clone of the current input's containing div
    // ADDED : ... after the current input's containing div
    _p.clone().insertAfter(_p);
}
于 2012-07-13T16:54:45.277 に答える
3

これを試して：

$("form").on('keydown',"input[name='age']:last", function() {
    $('.family:last').clone().insertAfter(".family:last");
})

jsFiddle の例

問題は、まだ存在しない要素にバインドしようとしていることです。.on() を使用してこれを行うには、dom に存在する要素にバインドする必要があります。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

次に、最後の div のみをチェックして複製し、それが入力であることを確認する必要があります。[]入力フィールドを複製するときは、名前を変更して同じ名前を使用する名前を大量に使用しないようにするか、名前の後に追加できる PHP のような言語を使用する必要があることに注意してください。PHP はそれを配列に解析します。

于 2012-07-13T16:58:13.873 に答える