Javascript jquery ajax html响应。。。更改输入值无效

专家们

我很难让jquery修改一些通过ajax响应动态注入的HTML值

我在页面上有一些html：

<button id="test">test</button>
<div class="main"></div>

测试

脚本（通过将html设置为静态值来模拟html响应）：

$（文档）。在（'click'，'#test'，function（）上{
$.ajax({
键入：“get”，
url:“/echo/html/”，
成功：
功能（数据）{
$（'.main'）.html（''）；
}
});
$（'#txt'）.val（'test'）；
});

预期的结果将是

但正如您从JSFIDLE中看到的，输入值仍然为空

---

非常感谢您的帮助。

Ajax执行的调用是异步的。您需要“等待”直到数据实际存在
尝试使用回调：

$(document).on('click', '#test', function(){
    $.ajax({
        type: 'get',
        url: '/echo/html/',
        success: function(data) {
            $('.main').html('<input id="txt" type="text" name="title" value="">');
            callback();
        }
    });
    function callback() {
        $('#txt').val('test');
        //...
    }
});

$（文档）。在（'click'，'#test'，function（）上{
$.ajax({
键入：“get”，
url:“/echo/html/”，
成功：功能（数据）{
$（'.main'）.html（''）；
回调（）；
}
});
函数回调（）{
$（'#txt'）.val（'test'）；
//...
}
});

---

Ajax执行的调用是异步的。您需要“等待”直到数据实际存在
尝试使用回调：

$(document).on('click', '#test', function(){
    $.ajax({
        type: 'get',
        url: '/echo/html/',
        success: function(data) {
            $('.main').html('<input id="txt" type="text" name="title" value="">');
            callback();
        }
    });
    function callback() {
        $('#txt').val('test');
        //...
    }
});

$（文档）。在（'click'，'#test'，function（）上{
$.ajax({
键入：“get”，
url:“/echo/html/”，
成功：功能（数据）{
$（'.main'）.html（''）；
回调（）；
}
});
函数回调（）{
$（'#txt'）.val（'test'）；
//...
}
});

---

这就是你想要做的吗

document.getElementById("test").addEventListener("click", function (e) {
    $.ajax({
        type: 'get',
        url: '/echo/html/',
        success: function(data) {
            $('.main').html('<input id="txt" type="text" name="title" value="">');
            $('#txt').val('test');
        }
    });
});

document.getElementById（“测试”）.addEventListener（“单击”），函数（e）{
$.ajax({
键入：“get”，
url:“/echo/html/”，
成功：功能（数据）{
$（'.main'）.html（''）；
$（'#txt'）.val（'test'）；
}
});
});

这就是你想要做的吗

document.getElementById("test").addEventListener("click", function (e) {
    $.ajax({
        type: 'get',
        url: '/echo/html/',
        success: function(data) {
            $('.main').html('<input id="txt" type="text" name="title" value="">');
            $('#txt').val('test');
        }
    });
});

document.getElementById（“测试”）.addEventListener（“单击”），函数（e）{
$.ajax({
键入：“get”，
url:“/echo/html/”，
成功：功能（数据）{
$（'.main'）.html（''）；
$（'#txt'）.val（'test'）；
}
});
});

下面的两个答案都是正确的，但是NullDev解释了原因并给出了一个演示。下面两个答案都是正确的，但是NullDev解释了原因并给出了一个演示。下面是在html中使用静态数据时，它可以正常工作。。。当实际等待ajax响应（非模拟）时，它不是。。。我认为您可能是对的，它没有检测到html响应并试图更改值。。。当实际等待ajax响应（非模拟）时，它不是。。。我想你可能是对的，它没有检测到html响应并试图更改值。不工作。。。我认为问题在于.html（响应）的加载速度不够快，无法设置值。这很有趣，因为当我尝试它时，它起了作用……这种补丁工作几乎不可靠。有时他们工作，大多数时候他们失败。不工作。。。我认为问题在于.html（响应）的加载速度不够快，无法设置值。这很有趣，因为当我尝试它时，它起了作用……这种补丁工作几乎不可靠。有时他们会工作，但大多会失败。