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

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.

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>

In your JS file, you ara attaching DomContentLoaded event to your code that activates youtube player. So, when your first get result is fired, it shall work fine as DOM is loaded and JS activates. But, in subsequent get calls your dom is not getting loaded, it’s changing.

I believe, you need to call the code which is activating youtube player everytime AJAX call succeeds.

What tou can do is attach your JS code to a custom event and then trigger this even everytime AJAX call succeeds.

In JS:

You can follow this link to see how an event can be created and triggered in JS

How to trigger event in JavaScript?