JavaScript 添加太多表格行

我有一个 JS 脚本如下:

function updateElementIndex(el,prefix,ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+-)');
    var replacement = prefix + '-' + ndx + '-';
    if ($(el).attr("for")) $(el).attr("for",$(el).attr("for").replace(id_regex,replacement));
    if (el.id) el.id = el.id.replace(id_regex,replacement);
    if (el.name) el.name = el.name.replace(id_regex,replacement);
}

function addForm(btn,prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    if (formCount < 3) {
    var row = $(".item:last").clone(false).get(0);
    $(row).removeAttr('id').hide().insertAfter(".item:last").slideDown(300);
    $(".errorlist",row).remove();
    $(row).children().removeclass("error");
    $(row).find('.formset-field').each(function () {
        updateElementIndex(this,formCount);
        $(this).val('');
        $(this).removeAttr('value');
        $(this).prop('checked',false);
    });
    $(row).find(".delete").click(function () {
        return deleteForm(this,prefix);
    });
    $("#id_" + prefix + "-TOTAL_FORMS").val(formCount + 1);
}

return false;
}


function deleteForm(btn,prefix) {
  var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
  if (formCount > 1) {
      var goto_id = $(btn).find('input').val();
      if( goto_id ){
        $.ajax({
            url: "/" + window.location.pathname.split("/")[1] + "/formset-data-delete/" + goto_id +
                "/?next=" + window.location.pathname,error: function () {
              console.log("error");
            },success: function (data) {
              $(btn).parents('.item').remove();
            },type: 'GET'
        });
      }else{
        $(btn).parents('.item').remove();
      }

      var forms = $('.item');
      $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
      var i = 0;
      for (formCount = forms.length; i < formCount; i++) {
          $(forms.get(i)).find('.formset-field').each(function () {
              updateElementIndex(this,i);
          });
      }
  }

  return false;
}

$("body").on('click','.remove-form-row',function () {
deleteForm($(this),String($('.add-form-row').attr('id')));
});

$("body").on('click','.add-form-row',function () {
   return addForm($(this),String($(this).attr('id')));
});

它将新行和新表单添加到 Django 表单集中。 起初,它工作正常,因为当我单击添加新行的按钮时,它正好添加了一行。但是当我关闭表单时,再次打开它并单击它添加 2 个新行的按钮。然后 3 等。如果表单收到 POST 请求或我刷新静态文件,它会再次正常工作。当我多次打开表单而不发布时,问题就出现了。如何更正它以始终只添加一行?

sgdtiancai 回答:JavaScript 添加太多表格行

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/33782.html

大家都在问