Question

专家，

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

我在页面上有一些HTML：

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

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

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

预计结果将是

但是从jsfiddle可以看出，输入值仍为空白。

感谢任何帮助。

Answer 1

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

的 Live Demo

Answer 2

这是你想要做的吗？

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');
        }
    });
});

jquery ajax html响应...更改输入值不起作用

2 个答案: