Question

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

当监控代码在doc ready函数中时，即使第一次“hello”更新也不起作用。但这可能与jsfiddle有关，因为我可以在本地超越这一点。但即使这样，origForm数据也不会被多次看到，因为我认为，doc ready函数只在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");
});

Answer 2

使用.promise()呈现表单后，您可以使用.html()。在填充表单后立即启动此回调。然后，您可以使用$("#showform form :input")来监控此eactly表单上的事件。与使用$(document).on(...)

相比，它的性能成本更低

在您的代码中：

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

       $("#showform").html(`
               // <--- All your previous html -->
        `).promise().done(function(){
              // <--- Execute your monitor after rendering new form -->
              $("#showform form :input").on("change input", function() {                    $("#changed").text("A change was made");
             });
          });
      }
  });
};

查看更新后的jsfiddle

了解有关.promise（）here-jquery-promises

的更多信息

监控表单因Ajax而失败

2 个答案: