jQuery的标签之后，不工作更换outerHTML [英] jQuery tab is not working after replace outerHTML

问题描述

jQuery的标签不更换下面的例子股利outerHTML后工作：
有一个在outerHTML没有变化，但仍然改变标签不能正常工作。为什么？

当我试图像点击是工作，但不支持HTML代码替换选项卡。

  $（＃prod5）。标签（{
                                创建：函数（事件，UI）{
                                    调试器;
                                    event.target.innerHTML == jqXHR;                                }                            }）;           功能数据（）{
            VAR replce = $（＃标签）HTML（）。
            $（＃标签）HTML（replce）;
                    $（＃标签），标签（刷新）。
        }
       ＆LT; D​​IV ID =标签级=山坳十一COLS标签-TT＆GT;
＆LT; D​​IV CLASS =山坳三COLS contentfontmedium translatetextID =prod5＆GT;
    ＆LT; UL类=山坳三COLS contentfontmediumID =prod6＆GT;        ＆LT;立GT;＆LT; A HREF =＃标签-1＆GT; 1 LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;立GT;＆LT; A HREF =＃标签-2＆GT; 2'; / A＆GT;＆LT; /李＆GT;    ＆LT; / UL＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID =子菜单＆GT;
    ＆LT; D​​IV ID =标签-1级=山坳八COLS的风格=填充右：0％;填充顶：0％;＆GT;
        TAB1
    ＆LT; / DIV＆GT;     ＆LT; D​​IV ID =标签-1级=山坳八COLS的风格=填充右：0％;填充顶：0％;＆GT;
        TAB2
    ＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我收到outerHTML使用jQuery

  $（＃+编号+）[0] .outerHTML;
 

和更换outerHTML使用jQuery

  $（＃+编号+）[0] = .outerHTML replcetext;
 

但标签更改不工作后更换。

下面是outerHTML replce前：

 函数数据（）{
            VAR replce = $（＃标签）HTML（）。
            $（＃标签）。标签（{
                创建：函数（事件，UI）{
                    调试器;
                    event.target.innerHTML == replce;
                    // $（标签）replaceWith（jqXHR）。
                }            }）;
         // $（＃标签）HTML（replce.toString（））;
         //// $（'＃标签）选项卡（'负荷'，$（'＃标签）选项卡（'选项'，'积极'））;
         。//// $（'＃标签）HTML（$（replce）的.html（））;
         // // $（＃标签），标签（刷新）。
         // $（＃标签-1）的负载（）。
         // $（＃标签-2）的负载（）。
         // $（＃标签），标签（）addClass（UI辅助-clearfix）。;
         // $（＃标签里）removeClass移除（UI角顶）addClass（UI角遗）。         // // VAR模板= Handlebars.compile（replce）;
         //调试;
          // $（'＃标签）HTML（模板（数据））。
        }
 

解决方案

把你的JavaScript code文件准备函数中如下，并在页面的结尾。

  $（文件）。就绪（函数（）{
    VAR replce = $（＃标签）HTML（）。    $（＃标签）。标签（{
        创建：函数（事件，UI）{
            调试器;
            event.target.innerHTML == replce;
            // $（标签）replaceWith（jqXHR）。
        }    }）;}）;
 

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

解决方案

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

    });

});

这篇关于jQuery的标签之后，不工作更换outerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！