无法在 jQuery 的选项卡上动态调用选择事件答案

【问题标题】：Unable to invoke select event dynamically on tab in jQuery无法在 jQuery 的选项卡上动态调用选择事件
【发布时间】：2012-06-18 17:32:34
【问题描述】：

我使用 jQuery API 创建了选项卡，并使用以下代码在单击第二个选项卡时绑定了一个事件处理程序：

    $('#tabs').bind('tabsselect', function(event, ui) {
        refreshRemoveUI(event,ui);
    });

function refreshRemoveUI(event,ui) {
    if(ui.index==1){
        $.get('FrontServlet?operation=getAllQues',function(data) {
            var html = "";
            var questionsNum = data.split(",");
            if(questionsNum!="") {
                html += '<br/><input type=checkbox name=removeAllQuestionId id=removeAllQuestionId onclick="toggleAll(this.checked)"/> Select/Deselect All<br/>';
                for(var i=0;i<questionsNum.length;i++){
                    html += '<br/><input type=checkbox name=removeQuestionId id=removeQuestionId /> ' + questionsNum[i];
                }
                $('#remove').show();
            } else {
                $('#remove').hide();
                html = 'No question available in quiz';
            }
            $('#removequestions').html(html);
            });         
    }
}

我也想在完成 ajax 请求时调用相同的绑定事件，以下是我尝试过但没有运气的方法：

    $.get('FrontServlet?operation=remove&position='+val, function(data) {
        $("#tabs li.ui-state-default:nth(1)").trigger("select");

    });

各位有什么想法吗？

【问题讨论】：

只是在这里做一些猜测，因为我并不完全了解此事，而且如果没有工作样本，重现问题需要大量工作，但你不应该这样做 [..].trigger('tabselect') 而不是[..].trigger('select')?

标签： jquery jquery-ui

【解决方案1】：

看起来您正试图在 ajax 加载后调用要选择的选项卡（本例中为第二个选项卡）。为什么不在 ajax 调用中使用它？

$('#tabs').tabs("select", 1);

希望有帮助！

【讨论】：

【解决方案2】：

似乎没有任何建议有效我不得不重构我的代码如下：

    $('#tabs').bind('tabsselect', function(event, ui) {
        if(ui.index==1){
            refreshRemoveUI(event,ui);
        }

    });

            $.get('FrontServlet?operation=remove&position='+val, function(data) {
                refreshRemoveUI();

            });

function refreshRemoveUI(event,ui) {
        $.get('FrontServlet?operation=getAllQues',function(data) {
            var html = "";
            var questionsNum = data.split(",");
            if(questionsNum!="") {
                html += '<br/><input type=checkbox name=removeAllQuestionId id=removeAllQuestionId onclick="toggleAll(this.checked)"/> Select/Deselect All<br/>';
                for(var i=0;i<questionsNum.length;i++){
                    html += '<br/><input type=checkbox name=removeQuestionId id=removeQuestionId /> ' + questionsNum[i];
                }
                $('#remove').show();
            } else {
                $('#remove').hide();
                html = 'No question available in quiz';
            }
            $('#removequestions').html(html);
            });         
}

现在我得到了我想要的结果。

【讨论】：