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

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

内容替换后，需要重新初始化插件

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

当你替换整个html时，插件相关的数据结构被破坏，这就是它不起作用的原因