JQuery ui Tabs如何動態創建元素？

Question

您好，我有以下的HML頁面。 我需要將jQuery ui Tabs插件應用於動態添加的元素。 我該怎么辦。 請注意，當我添加<li>元素作為可以正常工作的字符串時，但是當我使用document.createElement時，它不起作用，而是當我檢查這些元素時得到了相同的html結構

  <!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.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http:/resources/demos/style.css">
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs0">Sample0</a></li>
  </ul>
  <div id="tabs0">
    <p>exemple1</p>
  </div>
</div>

 <input  type="button" onclick="ReloadTabs()" value="rebuild"/>



<script>
      $(function() {
      $("#tabs").tabs();
    });

  //add tabs and recreate my tabs 

function ReloadTabs() {

  var liElement1 = document.createElement('li');
  var anchElement1 = document.createElement('a');
  $(anchElement1).attr("href", "tab1");
  $(liElement1).append(anchElement1);

  var liElement2 = document.createElement('li');
  var anchElement2 = document.createElement('a');
  $(anchElement2).attr("href", "tab2");
  $(liElement2).append(anchElement2);


  $("#tabs ul").append(liElement1);
  $("#tabs ul").append(liElement2);

  $("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
  $("#tabs").tabs("refresh");
}


  </script>
</body>
</html>

Answer 1

你可以這樣嘗試

更改按鈕的html

<input  type="button" id="rebuild" value="rebuild"/>

改變你的js代碼

$(function() {
      $("#tabs").tabs();

    $(document).on('click', '#rebuild', function() {

        var ul = $('#tabs').find('ul');
          var liElement1 = $('<li />');
          $(liElement1).append('<a href="#tab1" >tab1</a>');

          var liElement2 = $('<li />');
          $(liElement2).append('<a href="#tab2" >tab2</a>');

          $(ul).append(liElement1);
          $(ul).append(liElement2);

          $("#tabs").append('<div id="tab1"><p>sample1</p></div><div id="tab2"><p>.</p><p>Sample2</p></div>');
          $("#tabs").tabs("refresh");
    });

});

還檢查jsfiddle

http://jsfiddle.net/0jp0xpmu/1/

我不確定，但我認為這對您有幫助。

JQuery ui Tabs如何動態創建元素？

問題描述

1 個解決方案

解決方案1
1 已采納 2015-05-18 11:27:28

JQuery ui Tabs如何動態創建元素？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-05-18 11:27:28

解決方案1
1 已采納 2015-05-18 11:27:28