ng-click在ng-repeat IE9中多次触发

ng-click fires multiple times inside ng-repeat ie9

本文关键字：ng-repeat IE9 ng-click      更新时间：2023-09-26

我有一个奇怪的怪癖，似乎只发生在 ie9 的 AngularJS 中。

我有一个带有 ng 重复的重复按钮和一个带有 ng-click 的功能。单击按钮时，函数似乎运行多次并在按钮之间移动。我试图删除尽可能多的冲突代码，并将其缩减到这些部分。

我得出的结论是，它只发生在 add remove 类上，如果 else 语句，当它被删除时，它似乎工作正常。

这是我的代码：

            <div class="row multiple-question">
                    <button 
                     data-num="{{item.QuestionNo}}" 
                     class="answersbtn" data-ans="{{ answer.AnswerValue }}" 
                     ng-click="triggerNext(item.QuestionNo, answer.AnswerValue)" 
                     ng-repeat="answerswer in item.Answers">
                    <span class="letter num{{ $index + 1 }}"></span>
                        <h3>
                            <span class="circle right">
                                <span class="icon-checkmark"></span>
                            </span>
                        </h3>
                        <p>{{ answer.Answer }}</p>
                       <span class="arrow-right-button"></span>
                    </button>       
            </div>

函数代码在这里：

$scope.triggerNext = function(QuestionNo, AnswerValue) {
    console.log('function run');
    console.log(QuestionNo);
    console.log(AnswerValue);
    if($('.ansbtn[data-ans="'+AnswerValue+'"]').hasClass('active')) {
        $('.ansbtn[data-ans="'+AnswerValue+'"]').removeClass('active');
    } else {
        $('.ansbtn[data-num="'+QuestionNo+'"]').removeClass('active');
        $('.ansbtn[data-ans="'+AnswerValue+'"]').addClass('active');
    }
};

一种可能的解决方案是用div 或 span 元素将按钮括起来，并让它为 ng 重复提供服务，保持对每个按钮的 ng 单击。

嘿，

只是发布我的解决方案，尽管如果我坚持使用 ng-click，问题仍然存在，但如果我将按钮单击绑定到文档，问题就会消失，这不是正确的方法，据我所知。但它奏效了。

相关文章：