Question

我正在尝试使用jQuery html对象创建addmore功能，下面是代码。

var addmorehtml = $("<div><div class='btndiv'><label>Category Name : </label><input type='text' name='catname[]'></div></div>");
var  HTML = addmorehtml;
var clickcount = 1;

$('button#addmore').on('click', function(){
    HTML.find('div.btndiv').wrap("<div id='so_" + clickcount + "'></div>");
    $("<button class='removeme' onClick='removeMe(\"" + clickcount +"\")'>Remove Me</button>").insertBefore(HTML.find('div.btndiv'));
    $('div#result').append(HTML.html());  

    /* Why do I need to do this two steps  START */ 
    HTML.find('div.btndiv').unwrap("<div id='so_" + clickcount + "'></div>");   
    HTML.find('button.removeme').remove();
    /* END */
    clickcount++;  
});

如果我不在最后解开添加的html，它会不断添加到创建的新元素。我知道有很多方法可以添加更多内容但是如果我想继续这样做，应该对现有代码进行哪些修改，以便我不需要执行注释之间提到的那些步骤。

任何帮助都将不胜感激。

小提琴链接：http://jsfiddle.net/bhingarde/Lav7Lt7o/13/

Answer 1

JSFIDDLE DEMO - ＆gt; http://jsfiddle.net/Lav7Lt7o/15/

如下所示，将html blob直接添加到div#result而不是破坏它。

var clickcount = 1;

$('button#addmore').on('click', function() {

    var addmorehtml = $("<div id='so_" + clickcount + "'><button class='removeme' onclick='removeMe(" + clickcount + ")'>Remove Me</button><div class='btndiv'><label>Category Name : </label><input type='text' name='catname[]'></div></div>");

    $('div#result').append(addmorehtml);

    clickcount++;

});

function removeMe(id) {
    $('div#so_' + id).remove();
}

Answer 2

JSFIDDLE DEMO - ＆gt; http://jsfiddle.net/Lav7Lt7o/18/

您只想修改现有代码，但我想给您另一个答案，这个答案比我之前发布的修改答案要好。

以下答案删除了clickcount的使用情况，并使用事件委派来捕获删除事件。

$('button#addmore').on('click', function() {    
    var addmorehtml = $("<div id='so'><button class='removeme'>Remove Me</button><div class='btndiv'><label>Category Name : </label><input type='text' name='catname[]'></div></div>");
    $('div#result').append(addmorehtml);
});

$(document).on('click', '.removeme', function() {
    $(this).parent('#so').remove();
});

Jquery使用html对象添加更多内容

2 个答案: