Question

主页div使用Ajax请求进行更新。更新后的html包含一个带有输入字段的表单，一个按钮和另一个用于提交该表单的Ajax脚本。虽然可以通过按下注入表单中的按钮来启动第二个脚本，但脚本似乎没有按ID查找表单输入。我读到了JQuery的.on（）方法，但它似乎只提供对动态更新函数的访问，而不是元素。在使用Ajax请求将此元素注入代码后，如何通过ID获取input元素？

主页：

 <div id="output"></div>
 <span id="call_account">Account</span>


 $("#call_account").click(function(){
     $.get('/accounts/login/', {}, function(data){
               $('#output').html(data);
           });
 });

注入#output html：

<input id="id_username" name="username" type="text">
<input id="id_password" name="password" type="password">
<span id="account_submit">Submit</span>


        $("#account_submit").on("click", function() {

            var id_username = $('#id_username').val();
            var id_password = $('#id_password').val();

            $.ajax({
                 type:"POST",
                 url:"/accounts/login/",
                 data: {
                        'username': id_username,
                        'password': id_password,
                        },
                 success: function(data){
                         $('#output').html(data);
                 }
            });

        });
    });

我尝试提交表单时，

id_username和id_password未定义。

编辑：感谢下面这些家伙的回答，我得到了它的工作。我还在过程中对问题进行了jsfiddle模拟：https://jsfiddle.net/hn1Lrkzs/ 希望它可以帮助将来的某个人，我很难找到直接的答案，并且缺乏从帮助文件中获取该东西的理解。

Answer 1

将您的js封闭在document.body

中

    <script>
    $(document.body).on("click", "#account_submit", function() {


                var id_username = $('#id_username').val();
                var id_password = $('#id_password').val();

                $.ajax({
                     type:"POST",
                     url:"/accounts/login/",
                     data: {
                            'username': id_username,
                            'password': id_password,
                            },
                     success: function(data){
                             $('#output').html(data);
                     }
                });

            });


    </script>

Answer 2

尝试将事件委托给文档：

   $(document).on("click", "#account_submit", function() {
        var id_username = $('#id_username').val();
        var id_password = $('#id_password').val();
        $.ajax({
            type: "POST",
            url: "/accounts/login/",
            data: {
                'username': id_username,
                'password': id_password,
            },
            success: function (data) {
                $('#output').html(data);
            }
        });

    });

示例：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
$(document).on("click", "#account_submit", function() {
  console.log('delegated event: works');
});


$("#account_submit").on("click", function() {
  console.log('direct event: works');
});
  
</script>

<input id="id_username" name="username" type="text">
<input id="id_password" name="password" type="password">
<span id="account_submit">Submit</span>

使用Ajax注入表单，获取其输入值

2 个答案: