jQuery之後的方法不與新創建的元素

據我所知，下面的代碼應該工作，創建一個<div>元素，然後創建一個<p>元素;該表達式應該導致一個帶有兩個元素的jQuery對象：jQuery之後的方法不與新創建的元素

$("<div>first element's content</div>").after("<p>second element's content</p>");

但是，我得到的是非常不同的。 The documentation（請參閱標題「插入斷開的DOM節點」）告訴我，上面的代碼應該產生一個jQuery對象，抓取這兩個HTML片段並構建兩個DOM元素。但是，我得到的，在幾個不同版本的jQuery中，都是1.4以上，是一個只有1個節點的jQuery對象。但是，下面的代碼工作得很好，回來（我相信這是）正確的jQuery對象，兩個元素裏面：

$("<div></div>").after("<p>second element's content</p>");

而這個例子中的作品，以及：

$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>");

看來.after()方法工作正常，如果正在創建的第一個DOM節點是空的，但不是當它不是（不管隨後的DOM節點的內容被附加到它）。

我是否錯過了關於jQuery內部的東西，古怪的DOM問題和/或JavaScript的特性，或者這只是一個jQuery的bug從1.4版持續到1.7？

（Here's a meager JSFiddle演示該問題很清楚。）

來源

2012-05-07 Paul Sebastian Bruno

正如下面的評論提到** ** elclanrs回答，'add'是一個可行的替代品，我已經颳起了[新的jsfiddle ]（http://jsfiddle.net/paulbruno/beFUF/）來證明它的工作原理。然而，這並不能解釋爲什麼[docs]（http://api.jquery.com/after/）（甚至它的評論，看到包含來自「MarkAndrewSlade」的答案的整個線程）上顯示的行爲isn'當元素有內容時，可用於新創建元素的jQuery對象的'after'方法。 –

這是一個已知的bug在jQuery的< 1.9。見http://bugs.jquery.com/ticket/8759

在jQuery中> = 1.9，則following information from the upgrade guide應注意：

之前1.9，.after()，.before()，和.replaceWith()將試圖在當前的jQuery添加或更改節點設置爲在第一節點在集合中沒有連接到文檔，並且在這些情況下返回一個新的jQuery集合而不是原始集合。這造成了一些不一致和直接的錯誤 - 該方法可能會或可能不會返回一個新的結果，具體取決於它的參數！從1.9開始，這些方法總是返回未修改的原始集合，並且嘗試在沒有父節點的節點上使用.after(),.before()或.replaceWith() - 也就是說，它所包含的集合或節點都不會改變。

來源

2012-05-07 22:33:47

非常感謝，** Mike **。 –

奇怪的是，在將jQuery從1.8.2更新到1.11.0後，我得到了同樣的錯誤。 $ .after（）和$ .before（）方法不適用於新創建的元素。我需要首先將新創建的元素添加到DOM，然後向其中插入新內容。另一個解決方法是使用$ .add（）方法，但如果您希望在元素之前插入內容，它將不起作用。 –

我也更新到jQuery後得到這種行爲1.10 – DrCord

使用add()將對象添加到集合中。我在已經存在或緩存在變量中的DOM元素中使用了更多的after()，但大多數情況下，如果使用動態標記更適合使用等效的insertAfter()。

$("<div>first element's content</div>").add("<p>second element's content</p>");

編輯：

這工作...

var $el = $('<div/>', { 
    text: 'hey there' 
}).after('<p>Lorem</p>');

來源

2012-05-07 21:32:30 elclanrs

謝謝** elclanrs **，回覆。我將來會使用'add'。我剛剛拿出了一個[new JSFiddle]（http://jsfiddle.net/paulbruno/beFUF/）來證明'add'確實可以做你所說的。但是這並不能回答我的問題，這就是爲什麼後''不會。 –

請參閱編輯...不知道爲什麼錯誤，但工程。 – elclanrs

再次感謝。因爲它沒有回答我的問題，所以我沒有給你答案，但是我已經對你的答案進行了投票，以表示對我的問題找到一個新的粒度的尊重。 –

我發現我有時仍然會遇到問題與.add()代替.after()，所以另一種簡單的方法來解決這個bug是做一個扔掉的包裝元素，.append()的同級元素，並使用.html()先手包裝的內容。

例：

$('body').append(
    $('<span/>').append(
     $("<div>first element's content</div>") 
    ).append(
     $("<p>second element's content</p>") 
    ).html() 
);

這將添加<div>和<p>但丟棄外<span>。我發現這個平時正常工作與.append()但可以有問題.appendTo()

來源

2015-11-06 20:39:07 WebChemist

jQuery之後的方法不與新創建的元素

回答

相關問題