1

所以我在使用 jQuery“.on”函数和动态创建的元素时遇到了一些令人不安的结果，我使用的代码是这样的：

这是在运行时随机调用的函数中：

$(".activity-feed").append('<div class="feed-story big-feed-story feed-story-comment multiline-feed-story">\
        <div class="photo-view inbox-size photo-view-rounded-corners">\
            <div class="comment-icon">\
            </div>\
        </div>\
        <div class="comment-content">\
            <div class="delete ucomment-delete click-target" id="ucomment-'+uqid+'" tabindex="-1" style="outline:none;"></div>\
            <span class="feed-story-creator"><a href="/user/'+uid+'/'+username+'">'+username+'</a>&nbsp;</span>\
                <span class="comment-text">\
                    <span>\
                        <span style="white-space: pre-wrap;">'+$(".comment-box").html()+'</span>\
                    </span>\
                </span>\
            <div>\
                <span class="feed-story-footer"><span class="story-timestamp-view">'+time+'</span></span>\
            </div>\
        </div>\
    </div>');

然后这个函数应该允许删除评论（它在页面底部定义，而不是在文档准备好之后）

$(".delete").on("click", function() {
    alert('test....');
});

但是，我单击“ucomment-delete”按钮，没有任何反应:(，但是如果我单击加载时存在的评论，它可以工作
这是为什么？我做错了什么？

4

4 回答 4

10

尝试事件委托

$(document).on("click", ".delete", function() {
 alert();
});
于 2013-07-26T04:16:55.120 回答
1

您需要将其绑定到页面上已经存在的元素，然后可以为页面上可能尚不存在的元素指定选择器：

$(".activity-feed").on("click",".delete", function() {
    alert('test....');
});

看这个小提琴的例子：

http://jsfiddle.net/G4MGZ/

于 2013-07-26T04:23:32.500 回答
0

必须将其.on()包裹在 中document.ready()，即使它位于文件末尾。我认为@John Koemer 所说的也是真的。

于 2013-07-26T04:38:11.010 回答
0

如果on不工作，那么你的jquery版本是旧的尝试delegate

$('body').delegate('.delete','click',function(){
 //stuff  
});
于 2013-07-26T04:18:50.460 回答