. replacewith()在jQuery 1.9+中不能工作

Question

我试图克隆<textarea>并克隆并替换标签<label> Number 1 <label>中的数字，每次按下添加按钮时增加1(因此第一个标签将具有1号，2号下面的标签等)。

这适用于jQuery 1.8及以下版本，但上面的任何内容都不会克隆并添加1到数字。

HTML

<div>
 <label for="number">Number <span class="one">1</span></label>
 <textarea id="number"></textarea>
</div>
<button>Add</button>

jQuery

var $row = $('div').clone(),
    cloneCount = 2;
$('button').click(function () {
    $row.clone().insertBefore($("button"));
    $('span').clone().attr('span', cloneCount++).replaceWith($('[class=one]:last')).text(cloneCount - 1);
});

JSFIDDLE: http://jsfiddle.net/wba6jvkj/

Answer 1

我不知道你试图用.attr('span'做什么，为什么它似乎在<1.8，或者为什么要从cloneCount中减去一个，但这应该是您想要的:

var $row = $('div').clone(),
    cloneCount = 2;
$('button').click(function () {
    $row.clone().insertBefore($("button"));
    $('span.one:last').text(cloneCount++);
});

<<p> jsFiddle例子/strong>

Answer 2

(回答这个老问题，因为谷歌把我带到这里。)

在jQuery 1.9中修改了节点断开连接的.replacewith()的行为。您可以在replaceWith()文档("附加说明"一节)和jQuery 1.9升级指南中找到以下解释:

在jQuery 1.9之前，如果第一个节点没有连接到文档，.replaceWith()将尝试添加或更改当前jQuery集中的节点，并且在这些情况下返回一个新的jQuery集而不是原始集。该方法可能返回也可能没有返回新结果，这取决于其参数的数量或连通性!从jQuery 1.9开始，.after()、.before()和.replaceWith()总是返回原始的未修改集合。尝试在没有父节点的节点上使用这些方法是没有效果的——也就是说，集合和它包含的节点都不会改变。

在您的代码中，您正在克隆元素上使用.replaceWith()，因此它尚未插入DOM。