Question

伙计我有博客帖子列表加载了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响应中的其他函数。

Answer 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查找可能会使事件执行有点慢。

Answer 2

Event bubbling.

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这个 element可以是a中视图的容器元素例如，模型 - 视图 - 控制器设计，或者如果事件是文档 handler希望监视文档中的所有冒泡事件。该文档元素在之前的文档头部中可用加载任何其他HTML，因此可以安全地在那里附加事件等待文件准备好。

$('#container-div').on('click', '#like', function() {
    console.log('Liked');
});

如果您有一个静态container-div，它将使其中的所有事件冒出来，即它可以看到由动态创建的对象引起的任何事件。

Answer 3

这个问题的解决方案是使用＆＃34;事件委托＆＃34;。这是一个非常强大的功能，允许您使用事件处理程序，而无需将它们显式附加到元素或元素组。这是一个例子：

$('#like').on('click',handleLike);

这意味着匹配选择器的任何内容都会触发回调。另外，我建议从使用id更改为更通用的东西，比如CSS类。

使用ajax加载的html内容不会检测其他js函数

3 个答案: