0

次のコードを使用してフォーム要素を動的に追加/削除しようとしています:

<form method="post" action="" id="form-step2" class="form-vertical">
   <fieldset>
      <legend>Inputs</legend>
      <div id="extender"></div>
      <p><a id="add_btn" href="#">Add</a></p>
    </fieldset>
</form>

$(function () {

//set a counter
var i = $('#form-step2 :input').length + 1;

//add input
$('a#add_btn').click(function () {
    $('<p><input type="text" name="items[]" id="' + i + '" value="' + i + '" />' +
        '<a class="dynamic-link" href="#step2">Remove</a></p>').fadeIn("slow").appendTo('#extender');
    i++;
    return false;
});


//fadeout selected item and remove
$(".dynamic-link").bind('click', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
  });

});

入力フィールドは追加されましたが、削除できません。私は何を間違っていますか？ http://jsfiddle.net/VTqhJ/

4

3 に答える 3

1

jsFiddle のリンク: http://jsfiddle.net/VTqhJ/5/

$(function () {

        //set a counter
        var i = $('.dynamic-input#form-step2').length + 1;
        alert(i);
        //add input
        $('a#add').click(function () {
            $('<p><input type="text" class="dynamic-input" name="items[]" id="' + i + '" value="' + i + '" />' +
                '<a href="#step2">Remove</a></p>').fadeIn("slow").appendTo('#extender');
            i++;

            $("a:contains('Remove')").click(function () {
              $(this).parent().css("display","none");
            });

            return false;
        });


        $("a:contains('Remove')").click(function () {
            alert('hi');
        });

        //fadeout selected item and remove
        $("#form-step2.dynamic-input").on('click', 'a', function () {
            $(this).parent().fadeOut(300, function () {
                $(this).empty();
                return false;
            });
        });

    });
于 2013-03-03T18:27:37.337 に答える
1

問題は、イベント ハンドラーをリンクにアタッチするときに「削除」リンクが存在しないことです。これを修正するには、2 つのオプションがあります。DOM に追加された直後に各「削除」リンクにイベント ハンドラーをアタッチするか.on、「セレクター」パラメーターを使用することができます。あなたの jsfiddle から、これを試したことがわかりましたが、うまくいきませんでした。

そのはず：

$("#form-step2").on('click', '.dynamic-link', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
});

すべての「削除」リンクの先祖である要素を呼び出す必要があり.on()ます（および呼び出された時点で存在します.on()）。次に、「selector」パラメーターを設定して、「Remove」リンクを識別します。

.on()で関数を呼び出すことは常に安全ですが$(document.body)、より近い祖先を使用することをお勧めします。フォーム要素を選択しました。

jsfiddle のデモ

于 2013-03-03T17:24:53.390 に答える
0

これも使えます。それは魅力のように機能します！

ただし、追加できるテキスト ボックスは限られています。しかし、これらのフィールドを検証するのは難しいと感じたので、値を入力するリスト ボックス方式を使用しました。

于 2013-03-03T17:13:25.693 に答える