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 回答