Applying jQuery attr value to new DOM elements (result of AJAX query)

Question

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?

Answer 1

You need to put the line in your post function after you add the new html to the page.

$("div#address select#country").live("change", function() {
    $.post("<?php print($_SERVER['PHP_SELF']); ?>", { country: $(this).val() }, function(data){
        $('div#address').html(data);
        $('div#address input[type=text]').attr("autocomplete", "off");
    }, "text");
});

If you run the javascript the way you have it in your post then the .attr("autocomplete", "off"); is run before the post is complete so it doesn't apply to the new html. Putting it inside the post function ensures that your new html is on the page.