javascript - 使用Ajax注入(inject)表单，获取其输入值

Question

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

主页:

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


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

注入(inject)#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>