30

ユーザーが要件に基づいて動的テキストフィールドを追加できる動的フォームを作成しようとしています。これが私のjqueryコードです..

$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length +1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
        var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");

        var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(lname);
        fieldWrapper.append(removeButton);
        fieldWrapper.append(addButton);
        $(this).remove();
        $("#buildyourform").append(fieldWrapper);

    });

});

そしてHtmlコードは...

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
    <div class="fieldwrapper" name="field1" id="field1" />
       <input type="text" name="name" class="fieldname" id="tb1_1" />
       <input type="text" name="email" class="lastname" id="tb1_2" />
       <input type="button" value="+" class="add" id="add" />
    </div>
</fieldset> 
<input type="submit" value="send" id="asdasd" name="submit" />

私のJSFiddleもチェックしてください。

私が間違っているのは、ユーザーが最初に「+」ボタンをクリックしてから機能をクリックすると、フィールドセットに2つのテキストフィールドが追加されることです。しかし、その後「+」ボタンをクリックすると、クリック機能がトリガーされません。ID が競合している可能性があります。助けてください。

4

4 に答える 4

59

hereのイベント委任構文を使用する必要があり.on()ます。変化する：

$("#add").click(function() {

に

$("#buildyourform").on('click', '#add', function () {

jsFiddle の例

于 2013-08-12T14:43:48.150 に答える
1

クリック イベントは新しい要素にバインドされていないため、a を使用しjQuery.onてクリックを処理します。

于 2013-08-12T14:47:03.840 に答える