Question

我在侧面板上有以下表格的表格：

<table>
<tr title='term1'><td>one</td></tr>
<tr title='term2'><td>two</td></tr>
<tr title='term3'><td>three</td></tr>
<tr title='term4'><td>four</td></tr>
</table>

当有人点击该列的某一行时，该行的标题将作为参数传递给在主面板中显示搜索结果的函数。

$("#content-display").on('click', 'tr', function (){      
    searchResults($(this).attr('title'));        
});

该行的标题是获取请求中使用的搜索词

function searchResults(searchTerm){    
    $.ajax({
      url: "search.php",
      data: {term: searchTerm},
      success: function(data){     
            $("#content-display").html(data);
      },
      dataType: 'html'
    });     
}

每当有人点击表格中的某一行时，新的搜索结果会替换#content-display div中的旧内容。

我想使用jquery ui标签改进此功能，以便<tr>元素上的每次点击都会创建一个新标签，其中包含搜索结果，而不是在新搜索结果时替换现有搜索结果完成。

如何将回调函数写入add事件，以便它附加动态生成的搜索查询内容（search.php？term = dynamicString）？

以下是添加静态内容的add事件的回调函数示例代码：

var $tabs = $("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function (event, ui){
        var tab_content = "testing";
        $(ui.panel).append(tab_content);                      
    }
});

Answer 1

你可以试试这个。

jQuery UI选项卡支持动态添加新选项卡（您已为此添加了代码）。

它提供了“添加”方法来使用AJAX添加新项目

所以，如果我这样做

$( "#tabs").tabs("add", "filename.php", "Search Heading");

当我们点击该标签时，它会从“firlename.php”加载内容。

此外，我们可以使用JavaScript选择任何标签。

$('#tabs').tabs('select', tab_index);

它将选择具有指定索引的任何选项卡。

在你的情况下，我认为这两个很适合。

示例代码为：

$( "#tabs").tabs("add", "search.php?term=" + search_var, search_var);
$('#tabs').tabs('select', last_index);

您可以通过转到此网址从Google Chrome开发者工具控制台试用此功能 http://jqueryui.com/demos/tabs/manipulation.html 只需在控制台中添加以下代码即可。

$( "#tabs").tabs("add", "collapsible.html", "Collapsible"); $('#tabs').tabs('select', 1);

如果我错过了什么，请告诉我。

朋友们，请提出更好的解决方案。

感谢。

如何将动态生成的ajax内容附加到jquery ui选项卡中新添加的选项卡？

1 个答案: