自定义延迟加载函数将数据加载到容器中后，jQuery函数OnClick不起作用

jQuery function OnClick doesn't work after the custom lazy load function loads the data into the container

本文关键字：函数 OnClick 不起作用 jQuery 延迟加载 数据 加载 自定义      更新时间：2023-09-26

我用jQuery创建了自己的自定义延迟加载函数。懒惰加载方面的一切都很好。当来自服务器的html数据被附加到容器中时，jQuery函数$(".send-comment").on("click");不起作用，但是当它没有惰性加载时，它工作得很好。

JavaScript 

/** JavaScript that executes then hit bottom of the document (Lazy Load functionality)*/ 
$(window).scroll(function () {  
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        var limit, pageOffSetAttr, url, dataID;
        url = "/ajax/lazy-post.php";
        limit = 5;
        dataID = $("#pageOffSetAttr").attr("data-id");
        pageOffSetAttr = $("#pageOffSetAttr").val();
        pageOffSetAttr = parseInt(pageOffSetAttr) + limit;
        pageOffSetAttr = $("#pageOffSetAttr").val(pageOffSetAttr);
        pageOffSetAttr = $("#pageOffSetAttr").val();
        $.post(url, {pageOffSetAttr:pageOffSetAttr, dataID:dataID}, function(data){
            $(".feeds-unit-container").append(data);
        });
    }
});

/** AJAX the send comment */
$(".send-comment").on("click", function(){
    var callback, context, url, dataAjax, dataID, code, msg;
    callback = $(this).attr("data-add-back-btn");
    url = "ajax/update-status.php";
    context = $("input#new-comment-" + callback ).val();
    dataAjax = $("input#new-comment-" + callback ).attr("data-ajax");
    dataID = $("input#new-comment-" + callback ).attr("data-id");
    $.post(url, {callback:callback, dataAjax:dataAjax, dataID:dataID, context:context}, function(data){
        data = data.split("|");
        code = $.trim(data[0]);
        msg = $.trim(data[1]);
        $("input#new-comment-" + callback ).val("");
        $("#feeds-comment-" + dataID).fadeIn("fast").prepend(data);
    });
});

HTML Side from Lazy Load PHP Script

<div class="row margin0" id="wall-post-#">
    <div class="col-md-4 pad0 parent-profile-image">
    <a href="#">
    <img alt="#" title="#" src="#" width="50" height="50">
    </a>
    </div>
    <div class="col-md-8 pad0 parent-profile-details">
        <ul class="pad0">
        <li class="name"><a href="#" class="bold">#</a>
        <li class="post"><p>#</p></li>
        <li class="likes">
            &bull;<a href="#" class="post-delete delete-post" data-ajax="delete-post" data-id="#">Delete</a>
            &bull;<a href="#" class="post-comment">Comment</a>
            &bull;<span class="post-time gray">#</span>
        </li>
            <li class="comment bg-default">
          <!-- Comment Box -->
          <li class="stats gray commentbox">
            <div class="row margin0">
              <div class="col-md-4 pad0 commentbox-image">
                  <img alt="#" title="#" src="#" width="30" height="30">
              </div>
              <div class="col-md-8 pad0 comment-details f12" style="width: 90%;">
                <ul class="pad0">
                  <li class="">
                    <p class="margin0">
                        <input id="new-comment-#" type="text" class="pull-left" data-ajax="send-comment" data-id="#" placeholder="Write a comment..."/>
                      <button data-add-back-btn="#"type="button" class="send-comment" title="Send Comment..."></button>
                    </p>
                  </li>
                    </ul>
                    </div>
                            </div>
          </li>
            <!-- ** Comment Box -->
                <!-- Comment Feeds -->
            <li class="stats gray comment-feeds">
                <ul class="pad0" id="feeds-comment-#">
                <li class="name pad2" id="feeds-comment-#">
                <div class="col-md-4 pad0 comment-image">
                  <a href="#">
                      <img alt="#" title="#" src="#" width="50" height="50">
                  </a>
                </div>
                <div class="col-md-8 pad0 comment-details f12">
                  <p><a class="bold" href="#">#</a>#</p>
                    <div class="col-md-8 pad0 comment-iteractions f12">
                                        &bull;<a href="#" class="post-delete feed-delete-comment" data-ajax="delete-comment" data-id="#">Delete</a>
                    &bull;<span class="post-time gray">#</span>
                    </div>
                </div>
             </li>
            </ul>
          </li>  
            <li class="stats gray comment-feeds">
                <ul class="pad0" id="feeds-comment-#">
            </ul>
            </li>
            <!-- ***Comment Feeds -->
        </li>
      </ul>
    </div>
  </div>

尝试使用委托

改变
$(".send-comment").on('click', function(....


$(document).on('click', ".send-comment", function(....

当你第一次运行$(".send-comment")时，它是空的(即$(".send-comment").length === 0，直到内容被附加到DOM，你才能bind。

尝试将当前的bind逻辑添加到$.post callback。

如果您想将事件附加到dom元素上，而这些dom元素现在没有附加到don上(例如，将在Ajax请求时附加)，您应该使用以下

$( document ).on( events, selector, data, handler );        // jQuery 1.7+
例如:

$( document ).on( "click", ".sent-comment", function(){...});

事件处理程序仅绑定到当前选定的元素;它们必须在代码调用.on()时存在于页面上。

所以你的问题是未来的DOM不能正确地绑定事件。为未来的DOM元素修复。

的解决方案相当于。live()将是类似

的东西

/** AJAX发送注释*/

美元(文档)。("点击"、"。Send-comment "， function(){

// your code here

});

相关文章：