我有一些HTML:
<div class="post-container self">
<a href="/user/Wiz">
<img class="avatar" alt="Profile Picture" src="">
</a>
<div class="post-body">
<div class="post" style="margin-left:0px;">
<div class="post-timestamp" style="display:inline-block;float:right">
<a href="/posts/80" style="color:#999">Oct 31</a>
</div>
<div class="post-functions dropdown displaynone" style="float:right;margin-right:5px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
<i class="icon-cog">
</i>
</a>
<ul class="dropdown-menu post-dropdown" role="menu" aria-labelledby="dLabel">
<a class="post-delete" href="javascript:void(0)"><i class="icon-trash"> </i>Delete</a>
</ul>
</div>
</div>
</div>
</div>
有了这个,我有一些Jquery:
$('.posts-content').on('click', '.post-delete', function(e) {
$('.post-dropdown').dropdown();
if (confirm('Are you sure you want to delete this post?')) {
var $this = $(this);
$.ajax({
url: '/a/delete_post',
type: 'POST',
dataType: 'json',
data: {'p' : post_id},
success: function() {
//...
return true;
}
});
}
return false;
});
第一次点击时,一切都完美无缺,但如果我转到另一个帖子,并尝试点击.post-delete
,则事件永远不会触发,控制台中也不会显示任何内容。如果我使用$.click()
它也有效,但我需要动态创建元素。为什么$.on('click')
不会触发第二次点击?
答案 0 :(得分:1)
我的猜测是你使用的下拉插件改变了DOM结构。
$('.post-dropdown').dropdown();
顺便说一句,
$this.parent().parent().parent().parent().parent()
这真的是非常糟糕的做法
您应该使用closest
代替。
答案 1 :(得分:0)
如果要动态创建元素,请尝试:
$(document).on('click', '.post-delete', function(e) { });