jQuery tab is not working after replace outerHTML

Question

The jQuery tab is not working after replacing outerHTML of div of the following example: There is no change in outerHTML but still tab change is not working. Why?

When I tried like click is working but HTML is not replacing the tab.

     $("#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>

I am getting outerHTML using jQuery"

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

And replacing outerHTML using jQuery

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

but tab change is not working after replace.

Below is outerHTML before replce:

        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

Put your javascript code within document ready function as below, and at the end of page.

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

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

    });

});

Answer 2

So the first solution I proposed was not working. Here is a new one that destroys and recreates the tabs.

In this case I am:

• getting the current settings of the tabs
• destroy the tabs
• change the outerhtml with your method
• then recreate the tabs with the saved settings

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>

You can also get the HTML before you destroy the tabs, because jQuery UI Tabs is only adding some attributes to the original content and wraps them in another. In an extreme case, you can replace the outerHTML, then destroy and recreate the tabs, like here: https://jsfiddle.net/evvqqrLf/4/, but it might have some unexpected side effects. Basically this is the code you need:

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

And of course you need to get the options of the original tabs sometime before you replace the HTML: var options = $('#' + id).tabs("option");

And yes, I am aware that calling .tabs(), .tabs('destroy') and then .tabs() again is a little overkill, but I wanted to clean up as much as possible from the original initialization. In case you want to risk it, just use $('#' + id).tabs(options);