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

Question

出于我的目的，某些点击事件将使用 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 之类的事件然后解除绑定，但这也不起作用。

Answer 1

我不会发誓这是真的，但我很确定文档就绪事件只会触发一次，所以$(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 连接之前执行。