Question

我知道这个问题有点被问到，但是它被问到与我的代码设置方式无关的其他问题，我认为这与它的工作方式无关。我不能为我的生活如何解决这个问题。

我设置了两个PHP页面。 index.php和getresult.php。 index使用AJAX进行分页。 AJAX调用getresult.php来获取数据。我有一个脚本来加载youtube视频（懒加载JS，而不是你的典型嵌入）。我的问题是该页面将通过AJAX加载，但我的youtube嵌入的javascript不起作用。它们看起来像黑盒子。 html，视频标题等都是通过，但JS现在还没有在div上工作。这里是getresult.php（<div class=\"videoplayer\"><div class=\"youtube-player\" data-id=\"" . $embedid . "\"></div>）上使用的div，其中class =＆＃34; youtube-player＆＃34;应该激活JS，但JS不是由它触发的。如果重要，请访问youtube播放器Here is the JS。 Youtube延迟加载JS没有分页/ ajax（如果我要将所有内容放在同一页面上），但是使用分页和ajax，它不会。

在index.php上我有以下内容：

function getresult(url) {
    $.ajax({
        url: url,
        type: "GET",
        data: {
            rowcount: $("#rowcount").val(),
            "pagination_setting": $("#pagination-setting").val()
        },
        beforeSend: function () {
            $("#overlay").show();
        },
        success: function (data) {
            $("#pagination-result").html(data);
            setInterval(function () {
                $("#overlay").hide();
            }, 500);

        },
        error: function () {}
    });
}

function changePagination(option) {
    if (option != "") {
        getresult("pagination/getresult.php");
    }
}

我会密切关注这一点。我花了几个小时试图解决它，我无法弄明白。谢谢！

编辑：一些神奇的巫师停下来帮助我。评论中的解决方案。

Answer 1

在您的JS文件中，您可以将DomContentLoaded事件附加到激活youtube播放器的代码中。因此，当您的第一个get结果被触发时，它将在DOM加载并且JS激活时正常工作。但是，在随后的get调用中，你的dom没有被加载，它正在改变。

我相信，每当AJAX调用成功时，你需要调用激活youtube播放器的代码。

tou可以做的是将JS代码附加到自定义事件，然后每次AJAX调用成功时都会触发它。

在JS中：

您可以点击此链接查看如何在JS中创建和触发事件

How to trigger event in JavaScript?

Answer 2

尝试重新初始化youtube嵌入的功能，如下所示：

＆＃13;

function getresult(url) {
    $.ajax({
        url: url,
        type: "GET",
        data: {
            rowcount: $("#rowcount").val(),
            "pagination_setting": $("#pagination-setting").val()
        },
        beforeSend: function () {
            $("#overlay").show();
        },
        success: function (data) {
            $("#pagination-result").html(data);

            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }

            setInterval(function () {
                $("#overlay").hide();
            }, 500);

        },
        error: function () {}
    });
}

function changePagination(option) {
    if (option != "") {
        getresult("pagination/getresult.php");
    }
}

function labnolThumb(id) {
  var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
  play = '<div class="play"></div>';
  return thumb.replace("ID", id) + play;
}

function labnolIframe() {
  var iframe = document.createElement("iframe");
  var embed = "https://www.youtube.com/embed/ID?autoplay=1";
  iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  this.parentNode.replaceChild(iframe, this);
}

＆＃13;

在加载的DIV中传入jquery AJAX / jquery调用时，Javascript无法正常工作

2 个答案: