Applying jQuery attr value to new DOM elements (result of AJAX query)
- by Daniel
Hello everyone,
I have a div on a page whose contents is replaced by an AJAX request when the user selects an option from a select list. When the page loads, I issue a command to disable the autocomplete feature for all of the pages text input elements:
//Stop that pesky browser autocomplete
$('input[type=text]').attr("autocomplete", "off");
However, when new elements appear in the div after an AJAX call, this line of code does not reference them because they were not part of the original DOM (when the page was loaded). I have tried appending the autocomplete line to the end of the post function:
//AJAX Post request that changes the fields in the address div for each different country
$("div#address select#country").live("change", function() {
$.post("<?php print($_SERVER['PHP_SELF']); ?>", { country: $(this).val() }, function(data) {
$('div#address').html(data);
}, "text");
$('div#address input[type=text]').attr("autocomplete", "off");
});
But for some reason it does not work and the autocomplete pops up when text is entered into any of the address fields. As far as I am aware I cannot use .live() to select the input elements because changing an attribute is not classed as an event.
So can anyone advise me how to modify the attributes of a newly created DOM element?
