JQuery 1.10 中的示例 tabs.refresh() 对我不起作用答案

【问题标题】：Example tabs.refresh() in JQuery 1.10 not working for meJQuery 1.10 中的示例 tabs.refresh() 对我不起作用
【发布时间】：2015-03-31 05:43:24
【问题描述】：

我有一个应用程序使用“旧”版本的 JQuery 选项卡小部件来动态添加和删除选项卡，即它使用 tabs.add() 和 tabs.remove()。我花了两天时间尝试使用 tabs.refresh() 的“新”方式，如 JQuery 升级指南中所述，但没有任何工作，但 Chromium 控制台上没有 javascript 错误。

这个网页包含我猜是官方的 JQuery 示例代码： http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

这是什么都不做的mycode。这是升级指南的剪切和粘贴：

<div id="tabs" class="ui-tabs-nav" ></div>
<script>
    function addTab(fileName, url){
        $( "<li><a href='#" + url +"'>" + fileName + "</a></li>" ).appendTo( "#tabs .ui-tabs-nav" );
        $( "#tabs" ).tabs().tabs( "refresh" );
}

这个函数像往常一样被调用，但用户界面没有变化。有什么想法吗？

这是整个应用程序。它显示了一个文件选择器，然后循环遍历生成的文件名列表，为每个文件名创建一个选项卡。在后端，服务器通过传递给选项卡的 url 为每个选项卡提供内容。 jQuery UI 选项卡 - refresh() 替换添加、删除

</script>
</head>
<body>
<table id="master buttons">
<tr>
    <td>
        <input type="file" id="selectedFiles" style="display: none;" multiple onchange="buildFileTabs.call(this, event)" />
        <img src="select_files_button_image.png" alt="Image Not Found" onclick="showFilePicker();"  />
    </td>

</tr>
</table>

    <script>

        function addTab(fileName, url){
            alert("AddTab");
            $( "<li><a href='" + url+"'>" + fileName + "</a></li>" ).appendTo( "#tabs .ui-tabs-nav" );
            $( "#tabs" ).tabs().tabs( "refresh" );
        }

        function showFilePicker() {
            document.getElementById("selectedFiles").click();
        }       

        function buildFileTabs( page, event) {
            var theElement = document.getElementById('selectedFiles');

            for (var i = 0, numFiles = theElement.files.length; i < numFiles; i++) {
                var url="http://localhost:8080/FDS/FastDictionarySearchServlet?filename=" + theElement.files[i].name;
                  addTab (  theElement.files[i].name, url ) ;
            }
        }   

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

【问题讨论】：

你能粘贴所有代码吗
Prashant，我将完整的应用程序添加到我的帖子中。试试吧！

标签： jquery-ui jquery-ui-tabs

【解决方案1】：

我最终想出了如何做到这一点。和我和 JQuery 一样，当你最终做对时，这很简单，但需要大量的试验和错误才能到达那里。

function addTab ( fileName ) {
    var url="http://localhost:8080/FDS/FastDictionarySearchServlet?filename=" + fileName ;
    var tabs = $( "#tabs" ).tabs();
    var ul = tabs.find( "ul" );
    $( "<li><a href='" + url + "'>" + fileName + "</a></li>" ).appendTo( ul );
    tabs.tabs( "refresh" );
}

<div id="tabs">
    <ul>
    </ul>
</div>

【讨论】：