Javascript 如果附加了div，则jqueryui不适用_Javascript_Jquery_Jquery Ui

Javascript 如果附加了div，则jqueryui不适用

javascript jquery jquery-ui

Javascript 如果附加了div，则jqueryui不适用,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我对jqueryUI有点意见。我注意到，当我将内容附加到页面时，UI似乎不起作用。我尝试了这个例子，它看起来像预期的那个样工作，然而当我试图扩展它时却并没有运气我的密码里有这个 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Tabs - Default functionality</title>

我对jqueryUI有点意见。我注意到，当我将内容附加到页面时，UI似乎不起作用。我尝试了这个例子，它看起来像预期的那个样工作，然而当我试图扩展它时却并没有运气

我的密码里有这个

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
    $('#tabs-1').click(function() {
        $('.boo').load('boo.html');
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
Hello World!

    <div class="boo">

    </div>
  </div>
  <div id="tabs-2">

  </div>
  <div id="tabs-3">

    <p>Some Test</p>
  </div>
</div>


</body>
</html>


jQuery UI选项卡-默认功能
$（函数（）{
$（“#制表符”）.tabs（）；
$（'#tabs-1'）。单击（函数（）{
$（'.boo'）.load（'boo.html'）；
});
});





你好，世界！
一些测试

我在boo.html中有这个

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tabb</a></li>
    <li><a href="#tabs-2">More  </a></li>
    <li><a href="#tabs-3">iFinal</a></li>
  </ul>
  <div id="tabs-1">
      First Tab
  </div>
  <div id="tabs-2">
      Second Tab
  </div>
  <div id="tabs-3">
      Final Tab
  </div>
</div>







第一选项卡
第二选项卡
最终选项卡

我希望在第一个选项卡中看到一个选项卡。但这是我看到的

任何帮助都将不胜感激。

您应该添加$（“.boo#tabs”）.tabs（）；加载内容后，在click事件中，因为tabs（）函数在将来的元素上不起作用

$("#tabs").tabs(); //this work only in the first id
$('#tabs-1').click(function() {
    $('.boo').load('boo.html', function() {
        $(this).find("#tabs").tabs(); //after complete load, convert tabs inside .boo
    });
});

编辑。此外，您必须为每组选项卡命名不同的名称

您的boo.html应该更像这样（因为href=#tabs-1打开id=tabs-1，所以它们不能重复）：







第一选项卡
第二选项卡
最终选项卡

您需要在新内容LOD后初始化新内容上的选项卡。使用load的完全回调来执行此操作。还应将clcik处理程序委托给始终存在的元素。删除或替换元素时，绑定到该元素的所有事件处理程序都将丢失

$(document).on('click','#tabs-1',function() {
       $('.boo').load('boo.html', function(){
           /* new content exists now, can run code on it*/
           $( "#tabs" ).tabs();
       });
});

第一个问题是用ID来命名两个选项卡。考虑将它们更改为类。然后在每次DOM更改调用该类上的.tabs（）之后：

boo.html

<div class="tabs">
  <ul>
     <li><a href="#booTab1">Tabb</a></li>
     <li><a href="#booTab2">More</a></li>
     <li><a href="#booTab3">iFinal</a></li>
  </ul>
  <div id="booTab1">First Tab</div>
  <div id="booTab2">Second Tab</div>
  <div id="booTab3">Third Tab</div>
</div>







第一选项卡
第二选项卡
第三选项卡

父代码：

<div class="tabs" id="tabContainer">
  <ul>
     <li><a href="#tabContainerTab1">Nunc tincidunt</a></li>
     <li><a href="#tabContainerTab2">Proin dolor</a></li>
     <li><a href="#tabContainerTab3">Aenean lacinia</a></li>
  </ul>
  <div id="tabContainerTab1">
     <p>Hello World!</p>
     <div class="boo"></div>
  </div>
  <div id="tabContainerTab2"></div>
  <div id="tabContainerTab3"><p>Some Test</p></div>
</div>

<script type="text/javascript">
   $(function() {
      $( ".tabs" ).tabs();
      $('#tabContainerTab1').click(function() {
         $('.boo').load('boo.html', function () { 
            $('.tabs').tabs();
         });
       });
    });
</script>







你好，世界
一些测试
$（函数（）{
$（“.tabs”）.tabs（）；
$（'tabContainerTab1'）。单击（函数（）{
$（'.boo'）.load（'boo.html'，函数（）{
$（'.tabs'）.tabs（）；
});
});
});

更具体地说，它需要位于

.load（）

回调函数中。一个函数中不能有两个同名的IDdom@VictoriaFrench可以，它们只应位于不同的父对象上，以便选择器更具体。您的

.load（）

将创建大量重复ID。这是不允许的。

<div class="tabs" id="tabContainer">
  <ul>
     <li><a href="#tabContainerTab1">Nunc tincidunt</a></li>
     <li><a href="#tabContainerTab2">Proin dolor</a></li>
     <li><a href="#tabContainerTab3">Aenean lacinia</a></li>
  </ul>
  <div id="tabContainerTab1">
     <p>Hello World!</p>
     <div class="boo"></div>
  </div>
  <div id="tabContainerTab2"></div>
  <div id="tabContainerTab3"><p>Some Test</p></div>
</div>

<script type="text/javascript">
   $(function() {
      $( ".tabs" ).tabs();
      $('#tabContainerTab1').click(function() {
         $('.boo').load('boo.html', function () { 
            $('.tabs').tabs();
         });
       });
    });
</script>