Question

jQuery(document).ready(function($) {
    $('#LM_MM_Plus_Icon').click(function(){
        $('#LM_MM_New_Div').append($('#LM_MM_Plus_Icon_Block').html());
    });
});

在上述功能中，只要我点击LM_MM_Plus_Icon，LM_MM_Plus_Icon_Block中的html就会附加到LM_MM_New_Div（这是一个空div）。

用户可以在LM_MM_Plus_Icon上点击任意次数，以便将html附加到LM_MM_New_Div。但我需要的是每次用户点击LM_MM_Plus_Icon时，都必须创建一个新的LM_MM_New_Div并将html附加到其中。

目前，所有html都附加到一个LM_MM_New_Div。

Answer 1

请尝试使用此方法：

function addBlock() {
  var block = $('<div></div>'),
      content = $('#LM_MM_Plus_Icon_Block').html(),
      deleteBtn = $('<button class="LM_MM_Delete">Delete Me</button>');
  block.html(content).append(deleteBtn).appendTo('#container');
}

$('#LM_MM_Plus_Icon').click(addBlock);
$('#container').on('click', '.LM_MM_Delete', function() { $(this).parent().remove(); });

这是一个工作小提琴：http://jsfiddle.net/YM68Z/

删除：http://jsfiddle.net/YM68Z/1/

Answer 2

您不能为多个Div使用类使用相同的ID

jQuery(document).ready(function($) {
$('#LM_MM_Plus_Icon').click(function(){
     $('<div class="LM_MM_New_Div" />').append($('#LM_MM_Plus_Icon_Block').html());
     $('<div class="LM_MM_New_Div" />').insertAfter($("body").find(".LM_MM_New_Div:last"));
});});

Answer 3

你应该：

克隆您的#LM_MM_Plus_Icon_Block元素
删除其ID（对于avoir duplicates）

jQuery(document).ready(function($) {
    $('#LM_MM_Plus_Icon').click(function(){
        $('#LM_MM_New_Div').append(
            $('#LM_MM_Plus_Icon_Block')
                .clone()
                .removeAttr('id'));
    });
    $('body').on('click', '.LM_MM_Remove_Icon', function() {
        $(this).closest('.LM_MM_Div').remove();     
    });
});

#LM_MM_New_Div {
    width: 200px;
    border: 1px solid grey;
}
#LM_MM_Plus_Icon_Block {
    display: none;
}
.LM_MM_Div {
    border: 1px solid grey;
    margin: 3px;
}
#LM_MM_Plus_Icon,
.LM_MM_Remove_Icon {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="LM_MM_Plus_Icon">+</button>

<div id="LM_MM_New_Div"></div>
<div id="LM_MM_Plus_Icon_Block" class="LM_MM_Div">
    Content
    <button class="LM_MM_Remove_Icon">x</button>
</div>

使用jquery循环div

3 个答案: