Question

在替换以下示例的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');
        }
       <div id="tabs" class="col eleven-cols tabs-tt">
<div class="col three-cols contentfontmedium translatetext" id="prod5">


    <ul class="col three-cols contentfontmedium" id="prod6">

        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>

    </ul>

</div>

<div id="subMenus">
    <div id="tabs-1" class="col eight-cols" style="padding-right: 0%; padding-top: 0%;">
        tab1
    </div>

     <div id="tabs-1" class="col eight-cols" style="padding-right: 0%; padding-top: 0%;">
        tab2
    </div>

</div>
</div>

我使用jQuery＆＃34;

获取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
然后使用保存的设置重新创建标签

＆＃13;

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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
<div class="col three-cols contentfontmedium translatetext" id="prod5">
  <nav class="nav-menu touchAction contentfontmedium contentZoom" id="nav2" style="width:100%;">
    <ul class="col three-cols contentfontmedium" id="prod6">
      <li><a href="#tabs-1">1</a></li>
      <li><a href="#tabs-2">2</a></li>
      <li><a href="#tabs-3">3</a></li>
      <li><a href="#tabs-4">4</a></li>
      <li><a href="#tabs-5">5s</a></li>
      <li><a href="#tabs-6">6
<br />goo</a></li>
    </ul>
    <div id="tabs-1">
      Content 1
    </div>
    <div id="tabs-2">
      Content 2
    </div>
    <div id="tabs-3">
      Content 3
    </div>
    <div id="tabs-4">
      Content 4
    </div>
    <div id="tabs-5">
      Content 5
    </div>
    <div id="tabs-6">
      Content 6
    </div>
  </nav>
</div>
<button id="btnReplace">
  Replace goo with zar
</button>

＆＃13;

您还可以在销毁选项卡之前获取HTML，因为jQuery UI选项卡仅向原始内容添加一些属性并将它们包装在另一个内容中。在极端情况下，您可以替换outerHTML，然后销毁并重新创建选项卡，例如：https://jsfiddle.net/evvqqrLf/4/，但它可能会有一些意想不到的副作用。基本上这是您需要的代码：

  // create tabs 
  // (you need this in order to restore the state for the replaced element)
  $('#' + id).tabs();
  // destroy tabs
  $('#' + id).tabs('destroy');
  // recreate tabs
  $('#' + id).tabs(options);

当然，您需要在替换HTML之前获取原始标签的选项：var options = $('#' + id).tabs("option");

是的，我知道再次调用.tabs()，.tabs('destroy')然后调用.tabs()有点矫枉过正，但我希望尽可能地从原始初始化中进行清理。如果您想冒风险，只需使用$('#' + id).tabs(options);

Answer 3

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

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

当你替换整个html时，插件相关的数据结构被破坏，这就是它无法正常工作的原因

Answer 4

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

像这样替换选项卡名称。

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

更换Tab文本后，刷新选项卡。 refer here.

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

Answer 5

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

而不是

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

使用

$("#" + id + "")

并指定HTML内容使用

$("#" + id + "").html("<div>example</div>")

希望有所帮助

Answer 6

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

我可能会误解你的问题。我想＆＃34; Arun P Johny＆＃34;答案可能有用。

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

以下是html代码

＆＃13;

 $(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
                }
            });
        }

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tabs">
        <ul>
            <li><a href="#fragment-1">One</a></li>
            <li><a href="#fragment-2">Two</a></li>
            <li><a href="#fragment-3">Three</a></li>
        </ul>
        <div id="fragment-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-2">
            tab2 contents
        </div>
        <div id="fragment-3">
            tab3 contents
        </div>
    </div>

    <div id="divContentToBeReplace" style="display:none">
       contents data changed.
    </div>

    <div id="divInitial" style="display:none">
        init
    </div>

＆＃13;

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

6 个答案: