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

【问题标题】：jQuery function OnClick doesn't work after the custom lazy load function loads the data into the container自定义延迟加载函数将数据加载到容器后jQuery函数OnClick不起作用
【发布时间】：2014-03-29 17:09:14
【问题描述】：

我使用 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);
    });
});

延迟加载 PHP 脚本的 HTML 端

<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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

尝试使用委托

改变

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

到

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回复。在延迟加载附加到 DOM 后，我什至无法提醒任何事情，它只发生在延迟加载 DOM 数据中，但与其他数据完美配合。
让我试着解释一下。当您加载页面时$(selector) 可能与延迟加载后不同。因此，请考虑您要延迟加载的内容，查看您尝试使用的选择器，然后在调试器中延迟加载之前和之后运行$(selector)，以查看两组不同。
要了解更多@ekeren 版本的工作原理或$.on() 的工作原理，请意识到events 通常会渗透到document 对象。所以$.on 函数在child 元素中的一个事件中侦听DON trigger 中的event。

【解决方案3】：

如果您想在现在未附加到 don 的 dom 元素上附加事件（例如，将附加 throw Ajax 请求），您应该使用以下

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

例如：

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

【讨论】：

【解决方案4】：

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

所以对于您的问题是未来的 DOM 无法正确绑定事件。 Ty 修复未来的 DOM 元素。

解决方案等效于 .live() 将类似于

/** AJAX 发送评论 */

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

// your code here

});

【讨论】：