引导选项卡模拟单击在 JQuery 中不起作用答案

【问题标题】：Bootstrap Tabs Simulated Click not working in JQuery引导选项卡模拟单击在 JQuery 中不起作用
【发布时间】：2017-09-04 13:06:28
【问题描述】：

我有想要模拟点击的 JQuery li 元素。我已经用 Angular 编写了一个小函数来做到这一点，但它似乎不起作用。

settings.triggerClick = function (levels) {
    for (var i = 0; i < levels.length; i++) {  
        $("#Monday-" + levels[i].LevelCode + "-tab").trigger("click");
    }
  }

这里是这样调用的：

// Get Service Levels to Build Delivery Rules Accordion
settings.getDeliveryServices = function() {
    $http.get(resourceBase + "api/service/levels").success(function(data) {
        settings.serviceLevels = data;
        // Get Service Days
        $http.get(resourceBase + "api/service/days").success(function(days) {
            settings.serviceDays = days;
            // Build the Accordion
            settings.accordian(settings.serviceLevels);
                settings.triggerClick(settings.serviceLevels);
            });
        });
    }

当页面/角度加载时调用 getDeliveryServices 函数。

我已经调试过了，到目前为止，我已经排除了 serviceLevels 是空的，所以那里不应该有问题。我还确保调试器正在进入 for 循环。当我使用控制台获取该元素时，它会找到正确的 JQuery dom 元素。所以我不确定问题是什么。还值得一提的是，这些元素是由一个角度 ng-repeat 循环生成的。

<li id="{{day.Day}}-{{level.LevelCode}}-tab" ng-repeat="day in settings.serviceDays">
    <a id="{{day.Day}}-{{level.LevelCode}}" href="#tabContent-{{day.Day}}-{{level.LevelCode}}" ng-click="settings.changeTab(day, level, $event)">{{day.Day}}</a>
</li>

所以我不知道在寻找之前是否与不可用的元素有关，但是我认为这不是问题，因为我在成功中调用了 settings.triggerClick() 方法/错误承诺。

【问题讨论】：

这似乎是反模式，但是使用原生点击 $(selector).get(0).click(); 而不是 .trigger("click")
你知道SO有一个js/html引擎来运行代码
不幸的是没有工作
考虑使用UI Bootstrap Tabs。它们提供与 AngularJS 框架集成的 Bootstrap Tabs 指令。使用 AngularJS 框架，控制器不应该直接操作 DOM。 DOM 操作应该封装在AngularJS directives 中。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

也许我记错了 Angular，但是当你设置时

settings.serviceDays = days;

这不会让您的ng-repeat="day in settings.serviceDays" 再次运行吗？如果是这样，那么元素似乎还没有时间渲染（并被分配了一个 onclick 回调）。

您应该能够通过进一步延迟对settings.triggerClick(settings.serviceLevels); 的调用来测试是否是这种情况（正如您所暗示的，API 调用已经延迟了它）。 setTimeout足以测试理论：

setTimeout(() => settings.triggerClick(settings.serviceLevels), 500)

我不知道将函数调用延迟到 ng-repeat 完成之前的正确方法是什么（如果结果证明这是您的问题的根源），但我发现这个 SO question 有一些想法：ng-repeat finish event

【讨论】：

当您手动尝试时，lis 的回调是否有效？
是的 - 它用于引导选项卡，当我手动单击它时 - 它没有问题
好的。抱歉，那我不知道可能是什么问题。祝你好运！

【解决方案2】：

最后通过调用引导选项卡函数以强制选项卡处于活动状态而所有其他选项卡处于非活动状态来修复它：

for (var i = 0; i < levels.length; i++) {
    $("#Monday-" + levels[i].LevelTmsCode + "-tab").tab("show");
    $("#tabContent-Tuesday-" + levels[i].LevelTmsCode).hide();
    $("#tabContent-Wednesday-" + levels[i].LevelTmsCode).hide();
    $("#tabContent-Thursday-" + levels[i].LevelTmsCode).hide();
    $("#tabContent-Friday-" + levels[i].LevelTmsCode).hide();
    $("#tabContent-Saturday-" + levels[i].LevelTmsCode).hide();
    $("#tabContent-Sunday-" + levels[i].LevelTmsCode).hide();
}

然后在超时时调用该函数以允许角度时间进行渲染：

setTimeout(() => settings.triggerClick(settings.serviceLevels), 500);

【讨论】：