div在jquery中不追加一次以上？

Question

我正在尝试添加带有数组名称的动态字段，我已经这样做了

<div class="extra_subject"></div>
<button class="add_sub btn">Add</button>
<button class="rem_sub btn">Remove</button>

在 JS 中我做到了

var subject_div = $('<div class="sub_add_extra">'
    +'<div class="control-group">'
        +'<label for="sub_form" class="control-label">Subject</label>'
        +'<div class="controls">'
            +'<select name="add_subject[]">'
                +'<option value="">Please Select</option>'
                 <?php foreach($sub as $row){ ?>
                    +'<option value="<?php echo $row->id; ?>" ><?php echo $row->subject_name; ?></option>'
                <?php } ?>
            +'</select>'
        +'</div>'
     +'</div>'
+'</div>');
$('.add_sub').click(function(e){
    e.preventDefault();
    $('.extra_subject').append(subject_div);
});
$('.rem_sub').click(function(e){
    e.preventDefault();
    $('.sub_add_extra').last().remove();
});

它第一次附加内容，然后当我尝试附加其覆盖现有 div 类 .sub_add_extra 并在我单击删除按钮时正确删除。

Answer 1

使用clone()

$('.add_sub').click(function(e){
    e.preventDefault();
    $('.extra_subject').append(subject_div.clone());
});

DEMO HERE 现在，您一次又一次地附加相同的对象。 clone() 将创建该对象的克隆并每次都附加此克隆对象。如果您将某些事件附加到原始对象，请使用clone(true)

Answer 2

尝试我创建一个这样的函数并在点击时使用它肯定会起作用

function addmoreoption() {
    var html_option = '<tr valign="center"><td valign="center" bgcolor="#E8E8E8" >Name</td></tr>';
    $('#more_option').append(html_option);
}