在 jQuery 的 ajax.load(） 之后，无法将元素附加到新加载的内容中

After jQuery's ajax.load(), unable to append an element to newly loaded content

本文关键字：新加载 加载 load ajax jQuery 之后 元素      更新时间：2023-09-26

出于我的目的，某些点击事件将使用HTML模板填充div.slide-content元素，该模板可能包含div.video-wrapper元素，然后我需要向其附加一个视频播放器元素，其属性由加载时某些全局变量的状态决定。

我的困境是要么无法在到达时将适当的侦听器绑定到div.video-wrapper，要么在 AJAX 调用完成时触发相应的事件(或者更糟的是，我同时这样做(。我可以让它处理 click 或 hover 等事件，但我更愿意使用用户无法自己生成的事件。

// listen for a click event on the given 'slide'
$(".ajax-link").click(function () {
    toc_index = parseInt($(this).attr("data-slide-number"));
    fetch_slide();
});
// load the next slide's content
function fetch_slide() {
    $(slide_content).load("slides/slide_" + toc_index + ".php").fadeIn();
    $("div.video-wrapper").trigger('ready');
    /* note that I've also tried triggering this via $(document).ajaxComplete() 
       as well; neither does anything unless I use events that are problematic */
}
/* this function needs to be called if #slide-content contains 
   an instance of div.video-wrapper */
function buildVideoElement(id, src) {
    var element = ethovid.template.replace("%%VIDEO_ID%%", id);
    element = element.replace("%%VIDEO_SOURCE%%", src);
    return $("div.video-wrapper").append(element);
/* my (failing) attempt to bind a listener to .video-wrapper elements
   note that though I'm trying to use the 'ready' event, really I've just chosen an    
   event that the user can't trigger themselves and that matches the trigger in 
   fetch_slide() above. 
*/
$(document).on("ready", "div.video-wrapper", function() { buildVideoElement();});

更新

还尝试使用像 click 这样的事件，然后取消绑定它，但这也不起作用。

我不会发誓这是真的，但我很确定文档就绪事件只触发一次，所以当你期望它时不会调用$(document).on("ready", "div.video-wrapper", ...。

幸运的是，load 方法接受函数回调参数，该参数将在新内容加载到 DOM 后执行。所以，我认为你想要这样的东西：

$(slide_content).load("slides/slide_" + toc_index + ".php", function () {
    // This function is executed after "slides/slide_" + toc_index + ".php"
    // has been fetched, parsed, and loaded into $(slide_content).
    var id = ?; // Get id from somewhere
    var src = ?; // Get src from somewhere
    buildVideoElement(id, src);
}).fadeIn();

从您给出的代码示例中，我无法判断 id 或 src 的值来自哪里，但看起来您需要将它们传递给buildVideoElement。

顺便说一下，你不需要调用$("div.video-wrapper").trigger('ready'); 它不会做任何事情，因为它几乎肯定会在加载函数甚至有时间建立与服务器的 AJAX 连接之前执行。

相关文章：