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

时间:2016-01-08 13:12:26

标签: javascript php jquery html ajax

伙计我有博客帖子列表加载了ajax列表在一个div中附加html。那个ajax html结果有一些按钮需要在点击时执行一些js事件。问题是加载html结果的bcs不会检测到某些事件......

使用ajax我得到完整的帖子列表,如下面的post-list.php但是当我尝试点击按钮likedislike时,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响应中的其他函数。

3 个答案:

答案 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)

Event bubbling.

  

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加,您可以使用委托事件   避免频繁附加和删除事件处理程序的需要。这个   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类。