jquery - 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

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

您不显示表单的 HTML，而是使用提交的 id，而不是使用提交按钮的类来处理点击事件（例如$(".submitBtn").click...）。

附带说明一下，您应该clone在将$form变量$table.on('click'...分配给事件处理程序之前将其分配给，<td>因为这可能会在以后导致问题。