无法访问从AJAX调用追加的元素

Question

I insert element from the php file as a result of successful ajax call. But for some reason that and everything in it is missing when I look at my source code of the page. It appears on the page correctly but it isn't clickable or anything until I refresh my page! How can I make elements usable right after successful AJAX call?

Jquery AJAX:

$( "#addvideo" ).click(function() {       
    $.ajax({
      type: "POST",
      datatype: 'json',
      url: "/public/index.php/admin/content/athletes/addvideo",
      data: { youtube: $("input[name=youtube]").val(), vid:$("input[name=athletes_vid]").val(), ci_csrf_token: $("input[name=ci_csrf_token]").val() }
    })
    .done(function( data ) {
      $('#youtubeholder').last().append(data);    
    });  
}); 

This call appends following data from php controller:

$jquery_data = "<div style='float: left; width: 200px; height: 200px' id='video_pic'>
                    <img id='".$id."' src='".img_path().$tb_data->filename."' /><br/>
                    <div class='btn deletevid' style='width: 145px; margin-left: auto; margin-right: auto;'>DELETE</div>
                </div>";

echo $jquery_data; 

To the <div id="youtubeholder"> on the same page as AJAX call. However nothign happens when I click the "DELETE" button.

Answer 1

View Source in the browser only shows what was originally in the HTML of the page as originally downloaded from the server. It does not show content that was dynamically or programmatically added to the page.

If you want to see the current content of the DOM, then use a DOM inspector as is built into nearly all browsers now. In Chrome, you can right-click, select "Inspect Element", click on the "Elements" tab and see the entire DOM hieararchy (you may need to expand the parts you want to see).

---

When you say "isn't clickable", it isn't entirely clear what you mean. If you mean that your click handlers are not bound to the elements that were dynamically added to the page, that is likely to be expected because you probably ran some code that looks like this:

$(some selector).click(function() {
    // code here
});

That code binds click handlers ONLY to the elements that exist at that moment, not to future elements that might match the selector.

You can work-around that issue in one of several ways:

1. You can manually bind events to the newly added elements.
2. You can use delegated event handling (instead of static event handling) that will work with dynamically added elements.

Dynamic event handling in jQuery works like this:

$(some static parent selector).on("click", "selector that matches dynamic elements", fn);

For example, this will work with dynamically added items in the #youtubeholder div that have a selector matching .deletevid:

$("#youtubeholder").on("click", ".deletevid", function() {
    // delete element here
});