Jquery的单击事件不起作用

Click事件不工作...使用角度与Jquery，在文件中都有多个点击事件，但是这一个特定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>

来源

2015-05-05 Andre Kuznetcov

您是否收到任何错误？ – j08691

当代码粘贴到控制台时，不会出现任何错误，当它从编辑器执行时，它不起作用 –

此示例的工作原理https://jsfiddle.net/aesL4jjh/ – Tuco

我会做这个 “角路”：

<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-展示和NG-动画：http://www.nganimate.org/

来源

2015-05-05 22:10:36 MonsieurNinja

是否如果你工作不工作试试这样吗？

$(document).ready(function(){ 

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

});

来源

2015-05-05 22:02:49 ThatTobMate

不，它没有我尝试过绑定之前，它真的起作用，因为它在一切都加载后绑定它，但对于一些地狱的原因它不 –

我刚碰到同样的问题。

你的代码是好的，see this fiddle

的问题，像提到的意见之一，就是角未完成渲染的元素。

你可以通过在你的点击函数上面运行jQuery函数来看到它。你会看到长度为0

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

所以，现在你必须找到一种方法来延缓点击事件的结合，直到你知道的元素实际上存在。

不幸的是，这是Angular处理得不好的一个领域。你可以阅读更多关于它this feature request

我总是尝试的第一件事是使用$超时。它等待，直到消化周期结束射击它的回调代码，即使你离开的时候空

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

本博客文章有一个很好的解决方案，创建触发一个回调指令，当最后NG重复元素已被渲染。 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">

来源

2015-05-05 22:21:16 Kolby

非常感谢，非常helpfull –

Jquery的单击事件不起作用

回答

相关问题