替换outerHTML后，jQuery选项卡无法正常工作

在替换以下示例的div的outerHTML之后，jQuery选项卡无法正常工作：outerHTML没有变化，但仍然无法使用制表符更改。 为什么？

当我尝试点击工作但HTML没有替换选项卡。

$("#prod5").tabs({ create: function (event, ui) { debugger; event.target.innerHTML == jqXHR; } }); function data() { var replce = $("#tabs").html(); $("#tabs").html(replce); $("#tabs").tabs('refresh'); } 
 
 
 
1
 
2
 
 
 
 
 tab1 
 
 tab2 
 
  

我正在使用jQuery获取outerHTML“

  $("#" + id + "")[0].outerHTML; 

并使用jQuery替换outerHTML

  $("#" + id + "")[0].outerHTML = replcetext; 

但更换后标签更改无效。

以下是replce之前的outerHTML：

  function data() { var replce = $("#tabs").html(); $("#tabs").tabs({ create: function (event, ui) { debugger; event.target.innerHTML == replce; // $("tabs").replaceWith(jqXHR); } }); // $("#tabs").html(replce.toString()); //// $('#tabs').tabs('load', $('#tabs').tabs('option', 'active')); //// $('#tabs').html($(replce).html()); // // $("#tabs").tabs('refresh'); // $("#tab-1").load(""); // $("#tab-2").load(""); // $("#tabs").tabs().addClass("ui-helper-clearfix"); // $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); // // var template = Handlebars.compile(replce); // debugger; // $('#tabs').html(template(data)); } 

Answer 1

将您的javascript代码放在文档就绪函数中，如下所示，并在页面末尾。

 $( document ).ready(function() { var replce = $("#tabs").html(); $("#tabs").tabs({ create: function (event, ui) { debugger; event.target.innerHTML == replce; // $("tabs").replaceWith(jqXHR); } }); }); 

Answer 2

所以我提出的第一个解决方案是行不通的。 这是一个新的破坏和重新创建选项卡。

在这种情况下，我是：

• 获取选项卡的当前设置
• 销毁标签
• 用你的方法改变outerhtml
• 然后使用保存的设置重新创建选项卡

 var id = 'prod5'; $('#' + id).tabs({ active: 2 }); function clickme() { // save settings var options = $('#' + id).tabs("option"); // destroy tabs $('#' + id).tabs('destroy') // get outerhtml var html = $('#' + id)[0].outerHTML; // apply a random change html = html.replace(/goo/g, 'zar'); // replace the outerHTML, thus the entire element $('#' + id)[0].outerHTML = html; // recreate tabs $('#' + id).tabs(options) } $('#btnReplace').click(clickme); 

    
 
 
 
1
 
2
 
3
 
4
 
5s
 
6 
goo
 
 
 Content 1 
 
 Content 2 
 
 Content 3 
 
 Content 4 
 
 Content 5 
 
 Content 6 
 
 
  Replace goo with zar  

Answer 3

替换内容后，您需要再次初始化插件

 $("#" + id).replaceWith(replcetext).tabs(); 

当您替换整​​个html时，插件相关的数据结构将被销毁，这就是它无法正常工作的原因

Answer 4

@Stpdevi，为什么你在尝试使用outerhtml替换？ 有什么理由吗？

像这样替换选项卡名称。

  $('#ui-id-2').html('Tab Name'); 

替换Tab文本后，刷新选项卡。 请参考这里。

  $( "#prod5" ).tabs( "refresh" ); 

Answer 5

如果你使用id（#id）的选择器，则不需要指出找到的第一个元素

代替

 $("#" + id + "")[0] 

使用

 $("#" + id + "") 

并分配HTML内容使用

 $("#" + id + "").html("
example
") 

希望能帮助到你

Answer 6

您可以尝试其他选项，例如handlebar js来生成html

我可能会误解你的问题。 我认为“Arun P Johny”的答案可能有用。

假设您只想更改标签标题和内容。 你可以使用beforeActivate事件，

以下是html代码

  $(function () { initTabs(); }); function initTabs() { var tabContent = $("#divInitial").html(); $("#tabs").tabs({ create: function (event, ui) { // here is your original example, the tab's structure will be destroy // event.target.innerHTML = tabContent; // that is main content }, beforeActivate: function (event, ui) { var tabIndex = ui.newTab.index(); // get tab index:JQuery UI 1.9 or later var content = $("#divContentToBeReplace").html(); $("#fragment-" + parseInt(tabIndex + 1)).html("tab" + parseInt(tabIndex + 1) + content); // Change Tab content var title = $("#tabs ul li").eq(tabIndex).text(); $('#tabs ul li:nth-child(' + parseInt(tabIndex + 1) + ') a').text('Other text'); //Change Tab title } }); } 

    
 
 
One
 
Two
 
Three
 
 
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 
 tab2 contents 
 
 tab3 contents 
 
 
 contents data changed. 
 
 init