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

Question

这个问题已经有答案了:

JavaScript does not fire after appending [duplicate] (3 个回答)

已关闭 7 年前。

伙计们，我有一个用 ajax 加载的博客文章列表，该列表将 html 附加到一个 div 中。 ajax html 结果有一些按钮，需要在单击时执行一些 js 事件。问题是加载 html 结果的 bcs 无法检测到某些事件...

使用ajax，我可以获得如下完整的帖子列表post-list.php但是当我尝试单击按钮like时或dislike在该 ajax 结果事件没有被触发时，我不知道为什么所有功能都在一个文件中。我用 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加载所有帖子，在某些事件上添加新帖子，在数据库中发送喜欢的结果并不喜欢。因此，在这个帖子列表结果中，当我尝试单击“喜欢”或“不喜欢”按钮时，什么也没有发生。

只有当我这样做时才有效:

<button id="like" onclick="Post.likePost(this);">Like</button>

但我不想以这种方式这样做。我不明白脚本检测 listPosts()但不会检测该 ajax 响应中的其他功能。

Answer 1

Event bubbling.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

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

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