如何替換具有自定義元素的JQuery UI小部件

我有JQuery UI小部件附加了DOM元素來完成這項工作。這個小部件在_destroy方法中刪除了這個元素，所以它會自行清理。如何替換具有自定義元素的JQuery UI小部件

一切都很好，直到我嘗試用一些其他小部件替換小部件。原始小部件被刪除（銷燬方法將刪除小部件自定義元素），但新的小部件不附加。

最好的說明是代碼，所以這裏是例子：http://jsfiddle.net/71xdxLvp/3/

的問題是：如何更換部件我？

注：

我知道問題出在哪裏，但我不知道如何解決它。

問題是在方法replaceWith的jquery.js - 看到代碼中的註釋：

return this.each(function() { 
    var next = this.nextSibling, // nextSibling is widgets custom element 
    parent = this.parentNode; 

    // Widget is removed and the widgets custom element is removed too 
    jQuery(this).remove(); 

    if (next) { 
     // New widget should be prepended to the widgets custom element, but 
     // the element is already removed from DOM. 
     // Method before() check this and won't append new widget 
     jQuery(next).before(value); 
    } else { 
     jQuery(parent).append(value); 
    } 
});

編輯：

replaceWith由第三方框架稱爲Apache Wicket

部件它創建DOM元素是CodeMirror

來源

2015-04-02 Vlasta Dolejs

你已經偶然發現了一個晦澀的角落案例.replaceWith()，這導致了一個bug。什麼情況是：

摧毀的第一個節點，你也破壞了以下同級自己
.replaceWith調用，銷燬功能，然後嘗試，現在不存在兄弟
它拋出之前插入一個新節點丟失節點上的NotFoundError

您可以解決此相當簡單，如果你「模擬」什麼replaceWith做自己：首先附加新的元素，並且只有調用remove後：

$("#widget").next().before("<div id=\"secondWidget\"></div>"); 
$("#widget").remove();

小提琴：http://jsfiddle.net/w7Lqfzcc/1/

如果不是（在評論中提及）的選項，你可以做一些事情略有不同：不是直接調用.remove，只需添加一個類display:none和清理後：

this.widgetContent.addClass("inactive"); 

.widgetContent.inactive { display:none; }

小提琴：http://jsfiddle.net/w7Lqfzcc/3/ [注意我替換爲小提琴一類的ID;使用ID-S生成子元素沒有多大意義]

這很混亂，但它是解決您擁有的尷尬的Widget生成的兄弟結構的最簡單方法。如果你想清理它，使用某種小部件級別的容器是你首先應該考慮的事情。

來源

2015-04-02 09:18:02 blgt

不幸的是'.replaceWith'被第三方庫（Wicket）調用，所以我不能自己模擬它。 :( – 2015-04-02 14:02:37

我看到了;檢查編輯是否有幫助，我通常會推薦閱讀你的小部件的結構，因爲replaceWith可能不是依賴兄弟的唯一函數 – blgt 2015-04-02 14:30:03

感謝您的更新 - 這是一個混亂的方式，但我認爲它可以工作，Widget也是第三方（見我的編輯），所以我不能輕易修改它的結構。 – 2015-04-08 08:30:42

如何替換具有自定義元素的JQuery UI小部件

回答

相關問題