javascript - 使用ajax加载后youtube spf无法工作

Question

在我的网页上，一切正常。

我的 js 工作得很好，但点击任何页面，页面正在使用 ajax 加载，但某些功能无法正常工作，例如我的 bootstrap carousel 或我的 parallax.js 插件..

如何进行事件管理？

我正在使用youtube spf plugin

我页面上的一些 js 示例

if (!$(".scene").length) return false;
 var q = document.getElementsByClassName("scene")[0];
 var r = new Parallax(q, {
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  frictionX: .2,
  frictionY: 4,
  originX: 0,
  originY: 1
 });

$('.img-area').cycle({
      fx:     'fadeout',
      speed:   950,
      timeout: 100
  }).cycle("pause");

$(".otel-history-list").on("click",function(){


    var historyName = $(this).find(".history-current-name").text();
    var historyDateIn = $(this).find(".history-current-datein").text();
    var historyDateOut = $(this).find(".history-current-dateout").text();
    var historyKisi = $(this).find(".history-current-kisi").text();

    $(".input-form-ara input").val(historyName);
    $(".otel-giris-cikis #checkin").val(historyDateIn);
    $(".otel-giris-cikis #checkout").val(historyDateOut);
    $(".kisi-sayi-otel-sec .kisi-count").text(historyKisi);
  });

或者类似这些代码

和我的ajax代码

$(function () {
    spf.init();
    NProgress.configure({ showSpinner: false });

    $(document).on('spfrequest', function (event) {
        NProgress.set(0.4);
    });

    $(document).on('spfprocess', function (event) {


        NProgress.set(0.6);
        NProgress.set(0.8);



    });



    $(document).on('spfdone', function (event) {

        NProgress.set(1.0);
        NProgress.done();



    });

    $(document).on('spfhistory', function (event) {

        NProgress.set(0.7);
        NProgress.set(0.9);
        NProgress.set(1.0);
        NProgress.done();

    });
});

我正在使用 bootstrap、parallax.js、cycle2.js、select2 插件

Answer 1

我过去回答过类似的问题，所以我在下面重申一下:

1. 我不确定您的完整代码集是什么，但根据您发布的内容，我猜测您的几个 html 元素(附加了 JQuery 事件处理程序)已生成并重新生成使用 ajax 函数生成——在加载原始 DOM 后可能会生成几次。

2. 这是 Ajax 代码触发后某些事件未触发的最可能原因。当使用 Ajax 以编程方式(重新)生成这些元素时，附加到 html 元素(例如 div)的事件处理程序将“分离”。

3. 因此，您想要做的是将事件处理程序“附加”到 DOM 树中的更高级别(最高级别是您的 html)，您确定不会以“编程方式”重新生成该级别，那么你需要检查 DOM 内部的相关元素是否存在。然后，当找到此元素时运行您的函数。

举个例子，您的代码中有这个 onclick 函数:

$(".otel-history-list").on("click",function(){
//your actions
  });

类为“otel-history-list”的元素可能是在页面加载后由 Ajax 调用生成或重新生成的，因此会与 onclick 事件监听器分离(请参见上面的#1-#2)。

因此，要按照上面的 #3 重写代码，您需要将事件监听器附加到 Ajax 不会重新生成的内容，然后只需查找其中的特定元素，其中包含您感兴趣的类:

$(document).on("click",".otel-history-list", function(){
    //your actions
      });

希望这有帮助!