javascript - 点击事件没反应怎么破？

问题描述

问 题

场景：一个页面所有的list都是动态加载的，每个list都有一个收藏按钮，在查询所有list时，有一个for循环，在这个循环里我写了个判断，如果视频被收藏，则点击收藏按钮，调用一个取消收藏方法。现在的情况是，这个按钮点击了没反应。不触发取消收藏的方法，麻烦看一下是哪里的问题？

下面是查询的方法：

                            $.ajax({
                                type: "get",
                                url: searchDoctorAllVideos(),
                                data: data,
                                dataType: 'json',
                                contentType: "application/json; charset=utf-8",
                                beforeSend: function(data) {
                                    if(data.readyState == 0) {
                                        weui.loading('loading');
                                    }
                                },
                                success: function(data) {
                                    if(data.length < 0) {
                                        weui.topTips('暂时没有视频');
                                    }

                                    for(var i = 0; i < data.length; i++) {
                                        var panel = video_panel__all.clone();

                                        页面地址
                                        var favorite = data[i].favorite; //收藏与否
                                        var videoUrl = source.attr('src', videoUrl);
                                        var videoId = data[i].videoId;

                                        //动态给每个收藏功能图片加class
                                        panel.find('.weui-jiaj-video-icon:eq(2)').addClass('favorite-' + i);

                                        
                                        //判断是否收藏
                                        if(favorite == true) {
                                            panel.find('.weui-jiaj-video-icon:eq(2)').attr('src', favoriteIcon);

                                            //取消收藏，点击按钮这里不触发方法
                                            $('.favorite-' + i).on('click',function(e){
                                                console.log("5456456");
                                                e.stopPropagation();
                                                cancelFavorite(videoId);
                                            });
                                        }

                                        //添加数据
                                        tab2.append(panel);
                                    }
                                },
                                complete: function(data) {
                                    if(data.status == 200) {
                                        setTimeout(function() {
                                            weui.loading('loading').hide();
                                        }, 500);
                                    }
                                },
                                error: function(data) {
                                    weui.topTips('数据加载失败！');
                                }
                            });

取消收藏的方法：
function cancelFavorite(videoId){}

我尝试了第二种方法,同样在判断是否收藏时,把获取到的按钮传给那个取消收藏的方法,同样方法不触发:

    var btn = $('favorite-' + i).selector;
    cancelFavorite(btn,videoId);

请问这种情况应该怎么写?谢谢

解决方案

我能发现的有三个问题：

1. $('favorite-' + i) 这个不是id选择器，也不是class选择器，也不是个tag，不知道能选出什么。。。

2. delegate这个方法虽然还能用，但是已经被jquery淘汰了，建议改用on

3. 你这里存在闭包的问题，我不是很熟悉，不过应该在callback运行的时候，videoId不是想要的值。如果不考虑低版本兼容的话，建议把var videoId = data[i].videoId;改成let videoId = data[i].videoId;，要么就考虑闭包的解决方法。

• 把$('favorite-' + i) ==> $('favorite-' + i, panel)试试

• 上面不行的话，把if块放到append(panel)下面试试

这篇关于javascript - 点击事件没反应怎么破？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！