Ajax请求只处理一次

Question

我有一个表格，其行如下图所示。单击订单在线链接时，表格将显示在行的下方，如第二张图像中所示。

第一张图片

第二张图片

现在，我正在做的是在单击提交按钮时启动ajax请求。请求在第一个实例中成功。但是当再次发出请求时它不起作用。 它适用于相同的<tr>但是当点击第二个<tr>的在线订单并且表单加载到<tr>以下时，提交ajax将无效，

  $(document).ready(function(){
    var $form  = $('.form'),  $table = $('.table');
    $table.on('click', '.link', function(e) {
        e.preventDefault();
        $table.find('tr.temp-row').remove();
        $(this).closest('tr').after(function() {
            var $tr = $('<tr class="temp-row"><td colspan="4"></td></tr>');
            return $tr.find('td').html($form).end();
        });
    });

    $("#cancel").click(function(){
      $form.hide();
    });

    $("#submit").click(function(){

      var request = $.ajax({
        url: "processform.php",
        type: "POST",
        //data: {msg : msg},
        dataType: "html"
      });

      request.done(function(msg) {
        //$("#log").html( msg );
        alert(msg);
      });

      request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
      });

      return false;
    })

  });

我的processform.php页面只返回一些在请求它的页面中发出警告的文本​​。

Answer 1

问题是您要使用标识为#submit的相同提交附加相同的表单。因此，您将拥有多个具有相同ID的提交按钮。

您不会为表单显示HTML，但是您应该使用提交按钮的类来代替提交的ID，而不是使用提交的ID（例如$(".submitBtn").click...）。

作为旁注，您应该clone $form事件处理程序中的$table.on('click'...变量，然后再将其分配给<td>，因为这可能会在以后导致问题。