jQuery点击事件无效

Question

Click事件不起作用...与 Jquery一起使用Angular，在文件中有多次单击事件，但是该特定的特定功能不起作用

<ul class="phone-tumbs">
    <li ng-repeat="img in phone.images" class="additionalImgs">
        <img ng-src="{{img}}" alt="possible images" />
    </li>
</ul>

<script>
    $(document).ready(function() {
        $(".additionalImgs").click(function() {
            $(this).fadeOut();
        });
    });
</script>

Answer 1

我会这样做"角度的方式"：

<ul class="phone-tumbs">
    <li ng-repeat="img in phone.images" ng-class="{fadedout: img.fadedout}" ng-click="img.fadedout = true">
        <img ng-src="{{img}}" alt="possible images" />
    </li>
</ul>

在您的CSS

中

li{
transition: opacity .5s;
}
.fadedout{
opacity: 0;
}

或实际使用ng-show和ng-ashimate：http：//www.nganimate.org/

Answer 2

如果您这样尝试，它是否有效？

 $(document).ready(function(){
    $(".phone-tumbs").on('click', '.additionalImgs',function(){
        $(this).fadeOut();
    });
});

Answer 3

我遇到了同样的问题。

您的代码很好，请参阅此小提琴

就像提到的评论之一一样，问题是Angular尚未完成元素。

您可以通过在单击功能上方运行jQuery函数来看到这一点。您会看到长度为0。

console.log($(".additionalImgs"));

因此，现在您必须找到一种方法来延迟点击事件的绑定，直到您知道元素实际上存在。

不幸的是，这是一个角度处理不太好的区域。您可以在此功能请求中阅读有关它的更多信息

我总是尝试使用$ timeout的第一件事。它等待直到摘要周期结束直到发射其回调代码，即使您将时间为空

$timeout(function(){
     $(".additionalImgs").click(function() {
          $(this).fadeOut();
     });
});

此博客文章有一个不错的解决方案，创建了一个指令，该指令在呈现最后的NG重复元素时会发出回调。http://www.nodewiz.biz/angular-js-final-callback-after-after-ng-repeat/

最简单的解决方案是在您的ng-repeat元素上使用ng-click。

<li ng-repeat="img in phone.images" ng-click="somefunction();" class="additionalImgs">