javascript - 使用 Ajax 监控表单失败

Question

我有一个大表单，我想监视它的变化。我在 this post 中找到了示例代码。当我运行发布的代码时，它工作正常。但我的表单使用的是 Ajax，但由于某种原因它不起作用。这是我的jsfiddle 。我在底部附近添加了第二个显示器，但它也不起作用。

当监控代码处于文档准备功能中时，即使是第一个“hello”更新也不起作用。但这可能与 jsfiddle 有关，因为我可以在本地超越该点。但即便如此，origForm 数据也不会出现多次，因为我认为，文档就绪函数仅在 Ajax 加载它时被调用一次。

使用 Ajax 时有没有办法监视所有字段？

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="saved_form"></div>
    <div id="changed"></div>
    <div id="showform"></div>



    <script> 
    $(document).ready(function() {
       ShowForm();
       $("#saved_form").text("hello");

       var $form = $("form"),
       origForm = $form.serialize();
       $("#saved_form").text(origForm);

       $("form :input").on("change input", function() {
          $("#changed").text("A change was made");
       });

    });

    function ShowForm () {
      $.ajax({
         url: 'ajax3.php',
         success: function(data) {

           $("#showform").html(`

            <form>
                <div>
                    <textarea name="description" cols="30" rows="3"></textarea>
                </div>
                <div>Username: <input type="text" name="username" /></div>
                 <div>
                    Type: 
                    <select name="type">
                        <option value="1">Option 1</option>
                        <option value="2" selected>Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                </div>
                <div>
                    Status: <input type="checkbox" name="status" value="1" /> 1
                    <input type="checkbox" name="status" value="2" /> 2
                </div>
            </form>      
            `);
          }
      });
    };

     var $form2 = $("form"),
     origForm2 = $form2.serialize();
     $("#saved_form").text(origForm2);
     $("form :input").on("change input", function() {
        $("#changed").text("A change was made");
     });
    </script>

Answer 1

您正在将表单动态添加到您的页面。选择器不会拾取更改事件。 on 方法中的事件和选择器也已正确定义。有关 on 方法的更多信息可以在这里找到 http://api.jquery.com/on/

试试这个:

$(document).on("change", "input, textarea", function() {
    $("#changed").text("A change was made");
});