如何通过JavaScript添加无限滚动结果的行为

How to add behavior via JavaScript on infinite scroll results?

本文关键字:结果 滚动 无限 何通过 JavaScript 添加      更新时间:2023-09-26

我已经开发了一个无限滚动的搜索页面(使用jQuery,没有插件),现在我想知道如何在我调用的WS返回的HTML中添加一些行为。我需要通过jQuery选择器添加一些JavaScript,但我一直依赖于

$(document).ready(function(){});
到目前为止,当我将HTML代码附加到页面时,这不会触发

。我唯一的想法是在jQuery AJAX调用成功事件后注入JS代码

function injectJS(){
   $('.elementA').click(function(){ /* do something */ });
   $('.elementB').click(function(){ /* do something */ });
   ...
   $('.elementZ').click(function(){ /* do something */ });
}
$.ajax({
   url: "/ajax/v1/path",
   type: "post",
   data: data, 
   success: function (data) {
      // 1. Add HTML to the page
      // 2. Inject JS to DOM objects
      injectJS
   },
   error: function (e) {
      console.log('error:'+e);
   }
});

这是唯一的解决方案吗?

我不得不说这种方法在我看来相当糟糕,因为它会将代码注入到页面中所有匹配的元素,甚至是那些先前获取的元素。

简短回答:

function injectJS(){
   $(document).on('click', '.elementA', function(){ /* do something */ });
   // ...
}

长答:

查找

  • "JavaScript事件冒泡"和/或
  • "JavaScript事件委托"
  • jQuery关于on()的文档。