0

申し訳ありませんが、初心者プログラマーです。Javascript/JQuery、できればJQueryで定期的に作成されるボタンとまったく同じように機能する動的に作成されるボタンを作成する方法を知る必要があります。これが私のコードです。

ここに私のHTMLがあります。

<div>
     <div style="margin-top: 30px;">
         1.)<input type="text" name="inputVal1" style="margin-left:30px;">
         <textarea style="margin-left: 55px;"></textarea>
         <button class="btn btn-small btn-info" id="add-opt-field" style="margin-left: 12px;"></button>
     </div>
</div>
<div id="opt-field"></div>

そして、これが私のJQueryです。

TL;DR は多くの新しい HTML 要素を作成します (しかし、より重要なのは、上記の HTML コードのボタンと同じ ID を持つボタンです。

var n = 1;
$('button#add-opt-field').one('click', updateField);

function updateField()
{
    $('#add-opt-field').on('click',function(){

        $('#add-opt-field').attr("class", "btn btn-small btn-danger");
        $('#add-opt-field').attr("id", "rem-opt-field");
        var newDiv = document.createElement("div");
        var num = document.createTextNode(++n+".)");
        var textField = document.createElement("input");
        var textArea = document.createElement("textArea");
        var btnAdd = document.createElement("button");

        $(textField).attr("type", "text");
        $(textField).attr("name", "inputVal"+n);
        $(btnAdd).attr("class", "btn btn-small btn-info");
        $(btnAdd).attr("id", "add-opt-field");

        newDiv.appendChild(num);
        newDiv.appendChild(textField);
        newDiv.appendChild(textArea);
        newDiv.appendChild(btnAdd);
        document.getElementById("opt-field").appendChild(newDiv);

        $(newDiv).css('margin-top',30+"px");
        $(textArea).css('margin-left',60+"px");
        $(btnAdd).css('margin-left',15+"px");
        $(textField).css("margin-left", 30+"px");
    });

}
4

1 に答える 1

3

動的に作成された要素の場合、イベント委任を使用する必要があります

$(staticContainer).on('click', 'dynamicButton', updateField);

staticContainerイベントがバインドされた時点で新しく作成された要素の祖先である DOM に既に存在する要素です。

また、HTML ページの ID は一意である必要があります

したがって、複数のインスタンスを持つことができるidの代わりにクラスを使用してください

ボタンの HTML を

<button class="btn btn-small btn-info"

に

<button class="btn btn-small btn-info add-opt-field"

また、この行を削除することもできます

$('button#add-opt-field').one('click', updateField);

イベントを複数回バインドする理由

コードは次のようになります

var n = 1;

$(staticContainer).on('click', '.add-opt-field', function(){

    var $this = $(this);
    $this.attr("class", "btn btn-small btn-danger");
    $this.attr("id", "rem-opt-field");
    var newDiv = document.createElement("div");
    var num = document.createTextNode(++n+".)");
    var textField = document.createElement("input");
    var textArea = document.createElement("textArea");
    var btnAdd = document.createElement("button");

    $(textField).attr("type", "text");
    $(textField).attr("name", "inputVal"+n);
    $(btnAdd).attr("class", "btn btn-small btn-info add-opt-field");

    newDiv.appendChild(num);
    newDiv.appendChild(textField);
    newDiv.appendChild(textArea);
    newDiv.appendChild(btnAdd);
    document.getElementById("opt-field").appendChild(newDiv);

    $(newDiv).css('margin-top',30+"px");
    $(textArea).css('margin-left',60+"px");
    $(btnAdd).css('margin-left',15+"px");
    $(textField).css("margin-left", 30+"px");
});

編集

削除ボタンがdivそれ自身の中に含まれている場合は、これを書き留めることができます

$(statucContainer).on('click', '.btn-remove', function() {
     $(this).closest('div').remove();
});
于 2013-06-06T17:47:47.313 に答える