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

Button1

更改您的js代码

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

还要检查jsfiddle

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

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

如何使用JQuery ui Tabs来动态创建元素？

1 个答案: