Jquery点击事件不起作用

时间:2015-05-05 21:15:31

标签: jquery angularjs events click

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>

3 个答案:

答案 0 :(得分:2)

我会这样做“有角度的方式”:

<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/

答案 1 :(得分:0)

如果你这样试试它会起作用吗?

 $(document).ready(function(){

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

});

答案 2 :(得分:0)

我遇到了同样的问题。

您的代码没问题,see this fiddle

问题,就像上面提到的评论之一,是角度还没有完成呈现元素。

您可以通过在单击函数上方运行jQuery函数来查看此内容。你会看到长度是0。

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

所以现在你必须找到一种方法来延迟你的click事件的绑定,直到你知道该元素实际存在。

不幸的是,这是Angular无法很好地处理的区域。您可以在this feature request

中详细了解相关信息

我经常尝试的第一件事就是使用$ timeout。它会一直等到摘要周期结束时触发它的回调代码,即使你把时间留空了

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

这篇博客文章提供了一个很好的解决方案,创建了一个指令,可以在渲染最后一个ng-repeat元素时触发回调。 http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/

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

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