在加载的DIV中传递jquery AJAX / jquery时，Javascript将无效[关闭]

Question

I know this question has sort of been asked, but it's been asked for other issues not related to how my code is set up, and I believe it's unrelated to how this works. I can't for the life of me figure how to fix this.

I have two PHP pages set up. index.php and getresult.php. index is paginated using AJAX. The AJAX calls to getresult.php for the data. I have a script to load youtube videos(lazy load JS, not your typical embed). My problem is that the page will load via AJAX, but the javascript for my youtube embeds isn't working. They appear as black boxes. The html, video titles, etc all come through, but the JS just won't work on the div now. Here's the div used on getresult.php ( <div class=\"videoplayer\"><div class=\"youtube-player\" data-id=\"" . $embedid . "\"></div> ) where class="youtube-player" is supposed to activate the JS, but the JS isn't triggered by it. Here is the JS for the youtube player if it matters. The Youtube lazy load JS was working without pagination/ajax(if I were to keep everything on the same page), but with pagination and ajax, it won't.

On index.php I have the following:

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");
    }
}

I'll keep a close eye on this. I've spent literally hours trying to figure it out and I can't figure it out. Thanks!

Edit: Some magical wizard stopped by and helped me. Solution in the comments.

Answer 1

Try re-initializing the function for the youtube embeds as shown below:

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);
}

</div>