I'm trying to use <element>.load() within a document.ready() block to dynamically load specific elements from another page (on the same server) and from those loaded, add an ID to the elements by using either attr() or prop(). Here's the problem: attr() and prop() will not add the ID to save my life. They just won't, and from what little I understand about this, it boils down to having to do with how the elements have been loaded. For example, there's something I read somewhere about how elements that get loaded this way have to be "bound" using something like live() or bind() before any changes can be made to the elements. Is this true?
Here's my code:
$('#r div form[name="loginform"]').load('foobar.htm #UserID, input[type="password"], input[type="submit"]');
$('#r div form[name="loginform"] input[type="submit"]').prop('id', 'submit');
The first line ensures the document is done loading before anything else... No biggy there. The next line loads the login form elements (#UserID, password input, and the submit button) into the current page from the foobar.htm. It puts these into a form element. The next line I'm trying to use to change the new submit button's ID... But no dice.
What am I doing wrong?
Note: When outputting the resulting "ID assignment attempt" using console.log as follows, it comes back as undefined:
console.log($('#r div form[name="loginform"] input[type="submit"]').prop('id'));
Help is VERY appreciated here. It's so frustrating.