blocks|key|1656924|text|如果你像这样尝试，它会起作用吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1656925|+$(document).ready(function(){

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

});|code-block|syntax|javascript|1656926|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Does it work if you try it like this?

<pre><code> $(document).ready(function(){

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

});
</code></pre>

blocks|key|1656972|text|我会这样做的“角度方式”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1656973|<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>|code-block|syntax|javascript|1656974|在你的css中|1656975|li{
transition:+opacity+.5s;
}

.fadedout{
opacity:+0;
}|1656976|或者实际使用ng显示和ng动画：http://www.nganimate.org/|offset|length|1656977|entityMap|0|LINK|mutability|MUTABLE|url|http://www.nganimate.org/^0|0|0|0|0|G|P|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I'd do this "the angular way": 

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

In your css

<pre><code>li{
transition: opacity .5s;
}

.fadedout{
opacity: 0;
}
</code></pre>

Or actually use ng-show and ng-animate: <a href="http://www.nganimate.org/" rel="nofollow">http://www.nganimate.org/</a>

blocks|key|1657010|text|我只是遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1657011|你的代码很好，看这把小提琴|offset|length|1657012|问题，就像上面提到的一个注释，是角还没有完成元素的渲染。|1657013|您可以通过在单击函数的右侧运行jQuery函数来看到这一点。你会看到长度是0。|1657014|console.log($(".additionalImgs"));|code-block|syntax|javascript|1657015|因此，现在您必须找到一种方法来延迟click事件的绑定，直到您知道元素实际存在为止。|1657016|不幸的是，这个区域的角度处理得不太好。你可以在此功能请求上读到更多关于它的信息。|1657017|我总是尝试的第一件事是使用$timeout。它一直等到摘要循环结束才触发回调代码，即使时间是空的|1657018|$timeout(function(){
+++++$(".additionalImgs").click(function()+{
++++++++++$(this).fadeOut();
+++++});
});|1657019|这篇博客文章有一个很好的解决方案，创建了一个指令，在呈现最后一个ng重复元素时触发回调。http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/|1657020|解决这个特殊问题的最简单的方法是在ng-click元素上使用ng-repeat。|style|CODE|1657021|<li+ng-repeat="img+in+phone.images"+ng-click="somefunction();"+class="additionalImgs">|1657022|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yrvuknk3/|1|https://github.com/angular/angular.js/issues/734|2|http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/^0|0|7|6|0|0|0|0|0|0|N|5|1|0|0|0|18|1T|2|0|H|8|U|9|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|F|3|G|5|6|7|1L|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1M|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1P|8|@]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|S|3|T|5|6|7|1T|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1U|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1V|8|@]|9|@$D|1W|E|1X|1|1Y]]|A|$]]|$1|Y|3|Z|5|6|7|1Z|8|@$D|20|E|21|10|11]|$D|22|E|23|10|11]]|9|@]|A|$]]|$1|12|3|13|5|L|7|24|8|@]|9|@]|A|$M|N]]|$1|14|3|-4|5|6|7|25|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|1D]]|1E|$5|17|18|19|A|$1A|1F]]]]

I just ran into this same problem.

Your code is fine, <a href="http://jsfiddle.net/yrvuknk3/" rel="nofollow">see this fiddle</a>

The problem, like one of the comments mentioned, is that angular hasn't finished rendering the element.

You can see this by running the jQuery function right above your click function. You'll see the length is 0.

<pre><code>console.log($(".additionalImgs"));
</code></pre>

So now you have to find a way to delay the binding of your click event until you know the element is actually there.

Unfortunately this is an area that Angular doesn't handle very well. You can read more about it in <a href="https://github.com/angular/angular.js/issues/734" rel="nofollow">this feature request</a>

The first thing I always try is using $timeout. It waits until the end of the digest cycle to fire it's callback code, even if you leave the time empty

<pre><code>$timeout(function(){
 $(".additionalImgs").click(function() {
 $(this).fadeOut();
 });
});
</code></pre>

This blog post has a nice solution, creating a directive that fires a callback when the last ng-repeat element has been rendered. <a href="http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/" rel="nofollow">http://www.nodewiz.biz/angular-js-final-callback-after-ng-repeat/</a>

The easiest solution to this particular problem is to use <code>ng-click</code> on your <code>ng-repeat</code> element.

<pre><code>&lt;li ng-repeat="img in phone.images" ng-click="somefunction();" class="additionalImgs"&gt;
</code></pre>

<code>Click</code> event doesn't work... use Angular with <code>Jquery</code>, have multiple click events in the file, but this one particular doesn't work

<pre><code>&lt;ul class="phone-tumbs"&gt;
 &lt;li ng-repeat="img in phone.images" class="additionalImgs"&gt;
 &lt;img ng-src="{{img}}" alt="possible images" /&gt;
 &lt;/li&gt;
&lt;/ul&gt;


&lt;script&gt;
 $(document).ready(function() {

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

 });
&lt;/script&gt;
</code></pre>

Jquery click event doesnt work

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Click事件不管用..。在Jquery中使用角，文件中有多个单击事件，但这一项不起作用<ul class="phone-tumbs"> <li ng-repeat="img in phone.images" class="additionalImgs"> <img ng-src="{{img}}"...

问Jquery单击事件不起作用
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery单击事件不起作用EN