Question

我使用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（）的内容始终按预期添加。这是问题，在随机页面刷新时，点击上的类似工作应该按预期执行功能。但大多数情况下，当我刷新时，on click不执行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

如果您将每个帖子的事件委派添加到其容器中，该怎么办？您只添加一个事件，并确保在应该...的任何元素上处理事件。

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

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

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

1 个答案: