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

Question

For my purposes, certain click events will populate a div.slide-content element with an HTML template which template may contain a div.video-wrapper element to which I then need to append a video player element whose properties are determined by the state of certain global vars at the time it's loaded.

My dilemma is either a failure to bind an appropriate listener to div.video-wrapper when it arrives, or else to trigger a the corresponding event when the AJAX call completes (or worse I'm doing both). I can make it work with events like click or hover , but I would prefer to use an event the user isn't going to be able to generate themselves.

// 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

Also attempted to use an event like click and then unbind it, but this doesn't work, either.

Answer 1

I won't swear this is true, but I'm pretty sure that the document ready event is only ever fired once, so $(document).on("ready", "div.video-wrapper", ... will not be called when you expect it to be.

Fortunately, the load method accepts a function callback argument that will be executed after the new content is loaded into the DOM. So, I think you want something like this:

$(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();

From the code sample you've given, I can't tell where the values for id or src would come from, but it does look like you will need to pass them to buildVideoElement .

By the way, you do not need that call to $("div.video-wrapper").trigger('ready'); It won't do anything as it will almost certainly execute before the load function has had time to even establish its AJAX connection to the server.