Question

我有一个代码，当用户点击添加行按钮时动态添加表行。这将发生在以下场景中。我的功能将根据收到的json响应将流程引导到3种不同的方式

如果响应长度大于0并且具有名为“actual”的键，则我将在弹出窗口中以只读模式填充接收到的响应。使用隐藏添加行按钮
如果响应长度大于0且没有名为“actual”的键，那么我将在可编辑模式下弹出窗口中的接收响应，并添加行按钮可见性模式 3.如果响应长度等于0并且没有名为“actual”的密钥..那么我将在弹出窗口中添加一个表行和addrow。

当我在流程2中，然后点击添加行按钮 - ＆gt;那个时候它添加一行后来我转移到流程3，然后点击添加行按钮一次 - ＆gt;我正在添加两行，并且我再次移动到流2并单击添加行按钮 - 。那个时候我点击添加行按钮时得到3行。所以每次增加一个。请帮忙找一个bug。非常感谢快速帮助！

$(document).on("click", ".popup-trigger", function(e) {
  $("#sino").val($(this).closest('tr').children()[1].textContent);
  $("#iname").val($(this).closest('tr').children()[2].textContent);
  $("#icode").val($(this).closest('tr').children()[3].textContent);
  $("#recqty").val($(this).closest('tr').children()[4].textContent);

  var irepno = $('#irepno').val();
  var icode = $('#icode').val();
  var sino = $('#sino').val();

  var inspinp = new Object();
  inspinp.sino = sino;
  inspinp.irepno = irepno;
  inspinp.icode = icode;

  //Call PopulateTable2 servlet to get the Inspection row details
  $.ajax({
    url: 'PopulateTable2',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify({
      "inspinp": inspinp
    }),
    contentType: 'application/json',
    mimeType: 'application/json',
    success: function(responseJson) {
      if (responseJson.length != 0) {
        if (responseJson && responseJson[0] && responseJson[0].actual1) {
          // find reponseJson as actual values; if found, then made that as read only(i.e., inspection data exist)
          $("#tab_logic").find("tr:gt(0)").remove();
          var tableinsp = $("#tab_logic");
          $.each(responseJson, function(key, value) {
            var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
            rowNew.children().eq(0).text(value['parameters']);
            rowNew.children().eq(1).text(value['specifications']);
            rowNew.children().eq(2).text(value['actual1']);
            rowNew.children().eq(3).text(value['actual2']);
            rowNew.children().eq(4).text(value['actual3']);
            rowNew.children().eq(5).text(value['actual4']);
            rowNew.children().eq(6).text(value['actual5']);
            rowNew.appendTo(tableinsp);
          });
          $("#addrow").hide();
          $("#save").hide();
        } else {
          // else, received response only criteria from QC_CRITERIA table and made it as user editable form
          $("#tab_logic").find("tr:gt(0)").remove();
          var tableinsp = $("#tab_logic");
          $.each(responseJson, function(key, value) {
            var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
            rowNew.children().eq(0).text(value['parameters']);
            rowNew.children().eq(1).text(value['specifications']);
            rowNew.children().eq(2).html('<input type="text" list="combo-options" id="inpact10" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(3).html('<input type="text" list="combo-options" id="inpact20" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(4).html('<input type="text" list="combo-options" id="inpact30" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(5).html('<input type="text" list="combo-options" id="inpact40" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(6).html('<input type="text" list="combo-options" id="inpact50" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(7).html('<img src="delete.gif" height="42" width="42" alt="idata" class="del">');
            rowNew.appendTo(tableinsp);
          });
          $("#addrow").show();
          $("#save").show();
        }

        //  return false;
      } else {
        $("#tab_logic").find("tr:gt(0)").remove();
        $('#tab_logic tbody').append('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
        $("#addrow").show();
        $("#save").show();
      }
    }
  });

  // Popup Window
  var scrollTop = '';
  var newHeight = '100';

  $(window).bind('scroll', function() {
    scrollTop = $(window).scrollTop();
    newHeight = scrollTop + 100;
  });

  //        $('.popup-trigger').click(function(e) {
  e.stopPropagation();
  $('.popup').after('<div class="page-cover"></div>');
  if (jQuery(window).width() < 767) {
    $(this).after($(".popup"));
    $('.popup').show().addClass('popup-mobile').css('top', 0);
    $('html, body').animate({
      scrollTop: $('.popup').offset().top
    }, 500);
  } else {
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
  };
  //        });

  //script for close button
  $('html, .popup-btn-close').click(function(e) {
    $('.popup').hide();
    $('.page-cover').detach();
    window.opener.location.reload();
  });

  //script for save button
  $('html, #save').click(function(e) {
    //  alert("i am");
    // add code here
  });

  //script for addrow button
  $('html, #addrow').click(function(e) {
    $('#tab_logic tr:last').after('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
  });
  $('.popup').click(function(e) {
    e.stopPropagation();
  });
});[![Flow 1 - add row - gives one row[![another one flow - see by default it has one row when pop up open - when click add row ; now its adding twice][1]][1]][1]

Answer 1

你的这一行

  $('#tab_logic tr:last').after('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
        });

尝试用.after()替换.append() 请注意，.after()会在每次出现tr:last后添加您的行。因此当你追加行时，它会明显增加请参阅jquery doc以获取更多信息..

http://api.jquery.com/after/

---编辑---

尝试删除html点击<{1}}

#addrow

Answer 2

似乎，添加行触发器 - 每当我们点击按钮时，事件多次/双次。所以添加了一个代码来取消绑定解决了我的问题的所有事件处理程序。任何我需要找出什么是双事件触发器。

＆＃13;

$(".popup").unbind();

＆＃13;

根据jQuery click events firing multiple times

中的评论

添加行无效

2 个答案: