提交后（）表格不使用Ajax

Question

周末的东西。我使用ajaxForm插件，它工作正常。但是使用after（）创建的表单通常只会提交给url并发布ajax。

$("a.update-time").live("click", function(event) { 

      event.preventDefault(); 
      var row = $(this).attr("id").split('-'); 

      $("#update-mini-form").remove(); 

      $(this).after(
       '<div id="update-mini-form"><form method="post" action="' + 'http://drupal.se/timetracker/timetracker/update_time/' + row[1] + '"> ' + 
       '<input type="textfield" name="title" value="">' + 
       '<input type="textfield" name="event_date" value="">' + 
       '<input type="textfield" name="hours" size="2" value="">' + 
       '<input type="submit" value="update">' + 
       '</form></div>'     
       ); 
     }); 

     $('#update-mini-form').live("submit", function(){ 

       var row = $(this).closest('a').attr("id").split('-'); 
       $(this).ajaxForm({ 
         url: 'http://drupal.se/timetracker/timetracker/update_time/' + row[1], 
         target:$("div#row-" + row[1]), 
         type: "POST", 
       }); 

     }); 

Answer 1

如果我理解正确，.live（）的工作原理是结合一个委托处理程序的文档元素和监听事件冒泡，对不对？正如Vishal和Poelinca Dorin指出的那样，您应该使用.on（）来获取当前版本的jQuery。

我认为你的问题可能是因为你的迷你表单提交处理程序不会阻止默认提交发生。试试这个：

$("a.update-time").live("click", function(event) { 
    event.preventDefault(); 
    var row = $(this).attr("id").split('-'); 

    $("#update-mini-form").remove(); 

    $(this).after(
     '<div id="update-mini-form"><form method="post" action="' + 'http://drupal.se/timetracker/timetracker/update_time/' + row[1] + '"> ' + 
     '<input type="textfield" name="title" value="">' + 
     '<input type="textfield" name="event_date" value="">' + 
     '<input type="textfield" name="hours" size="2" value="">' + 
     '<input type="submit" value="update">' + 
     '</form></div>'     
     ); 
}); 

// Note: You should probably replace $(document) with a more specific container element 
$(document).on("submit", "#update-mini-form", function(event){ 
    event.preventDefault(); 
    var row = $(this).closest('a').attr("id").split('-'); 
    $(this).ajaxForm({ 
     url: 'http://drupal.se/timetracker/timetracker/update_time/' + row[1], 
     target:$("div#row-" + row[1]), 
     type: "POST", 
    }); 

}); 

Answer 2

好吧，我得到了这个工作。我关于单一表单的建议，但live（）仍然是必要的。我猜是因为当你用JS移动/复制东西时，它仍然不是页面的一部分。我也有选择错误，但修复没有帮助。移动表单也是最接近被杀的，而live（）并没有帮助。所以我不得不改变系统把ID放在表单中。这是我用什么：

PHP：

$output .= '<div><form method="post" style="display:none" id="update-mini-form" action="' . 'http://drupal.se/timetracker/timetracker/update_time">' . 
       '<input type="textfield" name="title" value="">' . 
       '<input type="textfield" name="event_date" value="">' . 
       '<input type="hidden" name="id_mini_form" id="id-mini-form" value="">' . 
       '<input type="textfield" name="hours" size="2" value="">' . 
       '<input type="button" id="sendUpdate" value="update">' . 
       '</form></div>';     
    //$output .= '<pre>' .print_r($all, 1) . '</pre>'; 
    print $output; 

JS：

$("a.update-time").live("click", function(event) { 

      event.preventDefault(); 
      var row = $(this).attr("id").split('-'); 

      $("#id-mini-form").val(row[1]); 

      $(this).after($("#update-mini-form").show()); 


     }); 

     $("#sendUpdate").live("click",function() {   
      $.ajax({ 
         type: "POST", 
         url: "http://drupal.se/timetracker/timetracker/update_time/", 
         data: $('#update-mini-form').serialize(), 
         cache: false, 
         success: function(result){ 

          $("#update-mini-form").hide(); 
          alert(result); 
         } 
      }); 

      return false;   

     });