JqWidget选项卡 - 动态添加ajax内容的选项卡

Question

我想创建一个动态的点击将数据附加到选项卡，但我得到的选项卡未定义。你能告诉我什么是错的吗？不太清楚是什么的情况下，

我的JS

<script type="text/javascript"> 
     $(document).ready(function() { 
      // Create jqxTabs. 
      $('#jqxTabs').jqxTabs({ width: 580, height: 200,showCloseButtons: true }); 
      var length = $('#jqxTabs').jqxTabs('length') + 1; 
      var loadPage = function (url) { 
       $.get(url, function (data) { 
        data; 
        // console.log($('#content' + length).text(data)); 
        // console.log(data); 
       }); 
      } 
      $('div.s span').click(function() { 
       var getvalue = $(this).attr('rel'); 

     $('#jqxTabs').jqxTabs('addFirst', 'Sample title',loadPage(getvalue).text()); 
       $('#jqxTabs').jqxTabs('ensureVisible', -1); 


}); 


      // $('#jqxTabs').on('selected', function (event) { 
       // var pageIndex = event.args.item + 1; 
       // loadPage('pages/ajax' + pageIndex + '.htm', pageIndex); 
      // }); 
     }); 
    </script> 

我的HTML

Answer 1

所以首先检查标签控件正确的语法：

HTML：

.... 
<div id='jqxTabs'> 
    <ul> 
    <li></li> 
    </ul> 
    <div></div> 
</div> 

Javasc RIPT：

// Create jqxTabs. 
$('#jqxTabs').jqxTabs({ width: 580, height: 200, showCloseButtons: true }); 
$('#jqxTabs').jqxTabs("removeFirst"); //here removes the empty tab 

//here the function must return the content, and the ajax must be async false for this purpose 
var loadPage = function (url) { 
    var result = null; 
    $.ajax({ 
     url: url, 
     type: 'get', 
     dataType: 'html', 
     async: false, 
     success: function(data) { 
      result = data; 
     } 
    }); 
    return result; 
} 

$('div.s span').click(function() { 
    var getvalue = $(this).attr('rel'); 

    $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue)); 
    $('#jqxTabs').jqxTabs('ensureVisible', -1); 
}); 

为了更好地理解检查：http://jsfiddle.net/charlesrv/h4573ykv/1/

编辑：对于新的条件下，使用自定义属性，以便检查会更容易：

$('div.s span').click(function() { 
    var getvalue = $(this).attr('rel'); 
    var opened = $(this).attr('opened'); 

    if (!opened) { 
     $(this).attr('opened', true); 
     $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue)); 
     $('#jqxTabs').jqxTabs('ensureVisible', -1); 
    } 
});