伙计我有博客帖子列表加载了ajax列表在一个div中附加html。那个ajax html结果有一些按钮需要在点击时执行一些js事件。问题是加载html结果的bcs不会检测到某些事件......
使用ajax我得到完整的帖子列表,如下面的post-list.php
但是当我尝试点击按钮like
或dislike
时,ajax结果事件没有被激活idk whay所有这些功能是在一个文件中。我检查用firebug检查他只检测listPosts()
功能。
参见示例: 在我的索引中加载了这个结果:
post-list.php文件
<!-- List of post loaded from db (LOOP)
<h1>Post title</h1>
<p> Post content </p>
<button id="like">Like</button> <!-- jquery click event need to be fired but wont -->
<button id="dislike">Dislike</button> <!-- the some -->
脚本示例:
var Post = {
addPost: function() {
// Ajax req for insert new post
}
listPosts: function() {
// Ajax req for fetching posts
}
likePost: function() {
// example
$("#like").click(function() {
console.log("liked") // debug
$.ajax() // etc;
});
dislikePost: function(obj) {
// the some
});
init: functon() {
Post.addPost();
Post.listPosts();
Post.likePost();
Post.dislikePost();
}
}
Post.init();
此脚本使用ajax加载所有帖子,在某些事件上添加新帖子,在db中发送类似结果并且不喜欢。因此,在此帖子列表结果中,当我尝试点击喜欢或不喜欢按钮时,没有任何事情发生。
只有在我这样做的时候才能工作:
<button id="like" onclick="Post.likePost(this);">Like</button>
但我不想这样做。我不明白该脚本检测listPosts()
但不会检测到该ajax响应中的其他函数。
答案 0 :(得分:1)
我建议使用类名而不是一次又一次地复制相同的ID:
<button class="like">Like</button>
<button class="dislike">Dislike</button>
现在您可以将事件委托给静态父元素:
$('staticParent').on('click', '.like', Post.likePost)
.on('click', '.dislike', Post.dislikePost);
其中$('staticParent')
将是包含按钮的容器元素,并且在帖子加载之前它就在那里。虽然您也可以将其替换为$(document)
,但是从document
查找可能会使事件执行有点慢。
答案 1 :(得分:1)
委派事件的优势在于它们可以处理来自的事件 稍后添加到文档中的后代元素。通过 选择一个保证在当时存在的元素 委托事件处理程序附加,您可以使用委托事件 避免频繁附加和删除事件处理程序的需要。这个 element可以是a中视图的容器元素 例如,模型 - 视图 - 控制器设计,或者如果事件是文档 handler希望监视文档中的所有冒泡事件。该 文档元素在之前的文档头部中可用 加载任何其他HTML,因此可以安全地在那里附加事件 等待文件准备好。
$('#container-div').on('click', '#like', function() {
console.log('Liked');
});
如果您有一个静态container-div
,它将使其中的所有事件冒出来,即它可以看到由动态创建的对象引起的任何事件。
答案 2 :(得分:-1)
这个问题的解决方案是使用&#34;事件委托&#34;。这是一个非常强大的功能,允许您使用事件处理程序,而无需将它们显式附加到元素或元素组。这是一个例子:
$('#like').on('click',handleLike);
这意味着匹配选择器的任何内容都会触发回调。另外,我建议从使用id更改为更通用的东西,比如CSS类。