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代码中的按钮具有相同的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");
    });

}

Answer 1

对于动态创建的元素，您需要使用事件委派

$(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(); });

如何使动态创建的按钮像常规按钮一样工作

1 个答案: