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

Question

Hello I have the following hml page. 您好，我有以下的HML页面。 I need to apply the jQuery ui Tabs plugin to the dynamically added elements. 我需要将jQuery ui Tabs插件应用于动态添加的元素。 how can I get that. 我该怎么办。 please note that when I add <li> elements as string that work fine but when i use document.createElement it dont work instead I get the same html structure when I inspect these elements 请注意，当我添加<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

you can try like this 你可以这样尝试

change html for your button 更改按钮的html

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

change your js code 改变你的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");
    });

});

also check in jsfiddle 还检查jsfiddle

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

I am not sure but i think it's helpful to you. 我不确定，但我认为这对您有帮助。

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