具有动态创建的元素的jQuery .on（“ click” ...）不起作用

Question

所以我在使用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”按钮，但没有任何反应:(但是，如果我单击加载时的注释，它将起作用
为什么是这样？ 我究竟做错了什么？

Answer 1

尝试事件委派

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

Answer 2

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

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

有关示例，请参见此小提琴：

http://jsfiddle.net/G4MGZ/

Answer 3

如果on不起作用，则您的jquery版本较旧，请尝试delegate

$('body').delegate('.delete','click',function(){
 //stuff  
});

Answer 4

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