jQuery: $("#myid").html('<span id="inserted">inserted portion</span>')

Say I am doing the following manipulation using jQuery:

$("#myid").html('<span id="inserted">inserted portion</span>')

After doing this operation, if I view the page source, the inserted portion of the HTML (the span tag with id "inserted") is not available there and any further operation I do with $("#inserted") simply fails!开发者_开发知识库

This becomes a major issue when we update (we usually use the jQuery html() method to insert new parts) part of the page by AJAX call and try to do more operations in the updated part.

Please anyone explain what am I missing?

whatever events you are binding for id inserted ....use live , this will bind for future html elements or html added at runtime

http://api.jquery.com/live/

$('#inserted ').live('click', function() {
  // Live handler called.
});

If #myid exists, then the new element will exist in the document's internal representation in the browser (the "DOM"). It shouldn't show on the "view source", since the source of the page is the original html (and js), but any operation from then on should behave exactly as if it existed in the source.

This is because the page source is just that... the source.. which is loaded into the browser. After the document is loaded, you manipulate the document via the jquery Document Ready function (executes after all images etc are loaded).

If you want to inspect your modified HTML/CSS/Whatever use a debugging tool such as firebug or the Chrome / Safari developer tools.

If $("#inserted) operations are failing I would suggest posting a specific example. We can't really help you if you don't post any specifics.