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/

我不确定，但我认为这对您有帮助。