Elements appended from AJAX call aren't accessible

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

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
});