javascript - jQuery 点击 ajax 随机生成的元素不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我使用 getData() 接收 ajax 内容

$('document').ready(function () {
    getData();
});

在 getDate 中，元素是根据服务器的 JSON 响应动态添加的。使用以下代码添加元素，在下面的代码中称为 CodeAddingHTMLFromAbove

            $("#list").append('<div class="ui card fluid" id="' + post._id + '"><div class="content"><i class="right floated star icon textWhite"></i><div class="header textWhite">' + post.title + '</div><div class="description"><p class="textWhite">' + post.description + '</p></div></div><div class="extra content"><span class="left floated like textWhite"><i class="like icon textWhite likeIcon"></i><span id="upvotes">' + post.upvotes + '</span></span><span class="right floated textWhite"><i class="comments icon textWhite"></i>Comments</span></div></div>');

为了更好的可见性，这里是附加的 HTML

<div class="ui card fluid" id="' + post._id + '">
    <div class="content">
        <i class="right floated star icon textWhite"></i>
        <div class="header textWhite">' + post.title + '</div>
        <div class="description">
            <p class="textWhite">' + post.description + '</p>
        </div>
    </div>
    <div class="extra content">
        <span class="left floated like textWhite">
            <i class="like icon textWhite likeIcon"></i>
            <span id="upvotes">' + post.upvotes + '</span>
        </span>
            <span class="right floated textWhite">
            <i class="comments icon textWhite"></i>
            Comments
        </span>
    </div>
</div>

在上述语句的每个实例之后，onClick 监听器都会添加为

function getData() {
    var data = {
        sortMethod: sortBy,
        lastPost: lastPost
    };
    // process the form
        $.ajax({
            type: 'POST',
            url: '/home/posts',
            data: data,
            dataType: 'json',
            encode: true
        })
        .done(function (data) {
            console.log(data);
            data.posts.forEach(function (post) {
                **CodeAddingHTMLFromAbove**
                $("#" + post._id).on("click", ".likeIcon", function () {
                    event.stopPropagation();
                    if ($(this).hasClass("liked"))
                        likeType = false;
                    else
                        likeType = true;
                    console.log(likeType);
                    // like function adds or removes class "liked" from the $this element based on likeType value
                    like(this, likeType);
                    // sendLike has AJAX call which sends and verifies like on server
                    sendLike(likeType, $(this).parent().parent().parent().attr("id"), this);
                });
                // lastPost acts as a marker for next content to get
                lastPost = data.posts[data.posts.length - 1]._id;
                // when inProcess is true, new content is not requested
                inProcess = false;
            }
        }
}

使用 getData() 的内容始终按预期添加。但这是问题所在，在随机页面刷新时，单击之类的操作会按预期工作并按预期执行功能。但大多数时候，当我刷新时，单击不会执行 like() 和 sendLike() 函数，尽管 console.log() 执行时会奇怪地打印出两个 true 或两个 false。

TL;DR:动态添加的内容上的点击监听器随机仅在随机页面刷新和休息时起作用，所有点击函数调用都不会执行，但执行的函数调用会执行两次。

**更新:我正在使用以下函数来获取页面滚动的更多数据**

// on scroll get new data
$(document).scroll(function (e) {
    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();
    if ((documentHeight - scrollAmount < 1000) && !inProcess && !reachedLastPost) {
        inProcess = true;
        getData();
    }
});

Answer 1

如果将每个帖子的事件委托(delegate)添加到其容器中会怎样？您只需添加一个事件，并确保该事件在任何应该...的元素上进行处理。

$("#" + post._id).on("click", ".likeIcon", function () {
//To
$("#list").on("click", ".likeIcon", function () {

并在页面加载时将其添加一次。