後jQuery的ajax.load（），不能追加一個元素，新加載的內容

Question

對於我而言，某些點擊事件將填充的HTML模板，模板可以包含div.video-wrapper元素，而我則需要div.slide-content元素附加一個視頻播放器元素，其屬性由其加載時某些全局變量的狀態決定。

我的困境是要麼在到達時無法將合適的偵聽器綁定到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();}); 

---

UPDATE

還試圖使用一個事件像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連接之前，它幾乎可以肯定執行。