Question

我有JQuery li元素，我想模拟点击。我已经用角度写了一个小函数，但它似乎没有工作。

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函数。

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

<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（）方法。

Answer 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完成之前延迟函数调用的正确方法是什么（如果结果是问题的根源），但我发现这个问题有一些想法：ng-repeat finish event

Answer 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);

Bootstrap选项卡模拟单击不在JQuery中工作

2 个答案: