Как заставить динамически созданную кнопку работать как обычная кнопка

Question

Извините, я начинающий программист. Мне нужно знать, как создать динамически создаваемую кнопку, которая работает точно так же, как и регулярно создаваемая кнопка в 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-коде выше.

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");
    });

}

Answer 1

Для динамически создаваемых элементов необходимо использовать делегирование событий.

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

staticContainer это элементы, которые уже присутствуют в DOM, который является предком вновь созданных элементов во время привязки событий.

Также идентификаторы на странице HTML должны быть уникальными

Так что используйте класс вместо идентификатора, где вы можете иметь несколько экземпляров

Измените свой 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();
});