Question

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

我的困境是要么在到达时将适当的侦听器绑定到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连接之前执行。

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

1 个答案: