替换外部HTML后，jQuery选项卡无法正常工作

Question

替换外部HTML后，jQuery选项卡无法正常工作

9

在替换以下示例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获取outerHTML。

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

使用jQuery替换outerHTML

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

但是在替换后选项卡切换不起作用。

以下是替换前的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));
        }

- stpdevi

$("a[href=#" + id + "]")[0].outerHTML = replcetext;的选择器怎么样？ - Siyavash Hamdi

它对我起作用了。告诉我错误信息是什么？ - Siyavash Hamdi

你能发布你的完整脚本代码吗？ - Lesmian

嗨@lesmian，以下是我的代码：function data() { var replce = $("#tabs").html(); $("#tabs").html(replce); } - stpdevi

请问在替换后，具体哪里出了问题？它看起来有什么不同吗？ - Lesmian

显示剩余9条评论

6个回答

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

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

在销毁选项卡之前，您也可以获取HTML，因为jQuery UI Tabs仅向原始内容添加一些属性并将其包装在另一个中。在极端情况下，您可以替换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);

- Siderite Zackwehdex

1

一旦内容被替换，您需要重新初始化插件。

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

当您替换整个HTML时，插件相关的数据结构被破坏，因此它无法工作。

- Arun P Johny

我在替换代码完成后再次初始化插件，但仍然无法工作。$("#tabs").tabs(); - stpdevi

1

如果你使用id选择器(#id)，那么不需要指定找到的第一个元素。

相反，应该使用

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

使用。

$("#" + id + "")

并且要分配HTML内容，请使用

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

希望它有所帮助。

- Marcelo Acosta

1

@Stpdevi，你为什么要尝试替换outerhtml？有什么原因吗？

像这样替换选项卡名称。

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

替换标签文本后，刷新标签。点击此处查看。

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

- Ponmani Chinnaswamy

嗨@ponamani，对我来说，在循环中HTML无法工作，因此我正在替换文本$("#" + key + "")[0].outerHTML，因此我得到了外部HTML。 - stpdevi

1

tabs('refresh')在您的情况下也无法正常工作吗？请检查控制台中是否出现任何错误。 - Ponmani Chinnaswamy

他正在更改整个选项卡容器的outerHTML，因此您无法刷新选项卡。他需要的是完全不同的方法，即更改选项卡中的文本。 - Siderite Zackwehdex

嗨，如果我在工作中使用HTML，那么它会给我同样的错误。在我的函数完成后，选项卡不起作用。我尝试调用$( "#prod5" ).tabs( "refresh" );，但仍然无法正常工作。 - stpdevi

-1

您可以尝试其他选项，例如Handlebars 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
                }
            });
        }

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

- Brad Huang

你能给我一个例子吗？ - stpdevi

jQuery是一个库吗？ - stpdevi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- INDIA IT TECH · Accepted Answer

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

$( document ).ready(function() {
    var replce = $("#tabs").html();

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

    });

});