Jquery 点击事件无效

Question

Click 事件不起作用...将 Angular 与 Jquery 一起使用，文件中有多个点击事件，但这个特定事件不起作用

<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

这样试试行不行？

 $(document).ready(function(){

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

});

Answer 2

我会这样做 "the angular way"：

<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-animate：http://www.nganimate.org/

Answer 3

我刚刚运行遇到了同样的问题。

你的代码没问题，see this fiddle

问题是 angular 尚未完成对元素的渲染。

您可以通过点击功能正上方的运行 jQuery 功能看到这一点。您会看到长度为 0。

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

所以现在您必须找到一种方法来延迟绑定您的点击事件，直到您知道该元素确实存在。

不幸的是，Angular 处理得不是很好。您可以在 this feature request

中阅读更多相关信息

我总是尝试的第一件事是使用 $timeout。它等到摘要周期结束时触发它的回调代码，即使你将时间留空

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

这篇博客 post 有一个很好的解决方案，创建一个指令，在呈现最后一个 ng-repeat 元素时触发回调。 http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/

解决此特定问题的最简单方法是在 ng-repeat 元素上使用 ng-click。

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

Jquery 点击事件无效

Jquery click event doesnt work

jquery

events

click

angularjs