Question

我在页面上有一个div，当用户从select列表中选择一个选项时，其内容将被AJAX请求替换。当页面加载时，我发出一个命令来禁用所有页面文本输入元素的自动完成功能：

//Stop that pesky browser autocomplete
$('input[type=text]').attr("autocomplete", "off");

但是，当在AJAX调用之后在div中出现新元素时，这行代码不会引用它们，因为它们不是原始DOM的一部分（当页面被加载时）。我尝试将自动完成行附加到post函数的末尾：

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

但由于某种原因，它不起作用，并且当文本输入任何地址字段时弹出自动完成功能。据我所知，我不能使用.live（）来选择输入元素，因为更改属性不会被归类为事件。

那么有人可以建议我如何修改新创建的DOM元素的属性吗？

Answer 1

在将新的html添加到页面后，您需要将该行放在post函数中。

$("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");
});

如果您按照帖子中的方式运行javascript，那么.attr("autocomplete", "off");会在帖子完成之前运行，因此它不适用于新的html。将它放在post函数中可确保您的新html在页面上。

将jQuery attr值应用于新的DOM元素（AJAX查询的结果）

1 个答案: