模态框(Modal)添加行异常求助：单次点击触发多行添加

Hey there, let's fix that annoying multiple-row issue you're seeing. The core problem here is duplicate event bindings: every time you click to open a modal (Safety or Operate), you're adding a new click handler to all .AddNew buttons on the page. So after opening/closing modals a few times, those buttons end up with multiple handlers attached—one for each time you opened a modal—resulting in multiple rows being added with a single click.

修复后的完整代码 #

HTML

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2 style="font-size:1.5rem" id="Safety">Safety</h2>
<h2 style="font-size:1.5rem" id="QualityInt">Operate</h2>
<div id="s_news" class="s_news">
  <table>
    <tr>
      <td class="headercolor">ISSUE</td>
      <td class="headercolor">ACTION</td>
      <td class="headercolor">Add/Remove Item</td>
    </tr>
    <span class="s_newsclose">&times;</span>
    <tr>
      <td><input type='text' value='Add New'></td>
      <td><input type='text' value='Add New'></td>
      <td><input type='button' class='AddNew' value='Add new item'></td>
    </tr>
  </table>
</div>
<div id="qi_news" class="qi_news">
  <table>
    <tr>
      <td class="headercolor">ISSUE</td>
      <td class="headercolor">ACTION</td>
      <td class="headercolor">Add/Remove Item</td>
    </tr>
    <span class="qi_newsclose">&times;</span>
    <tr>
      <td><input type='text' value='Add New'></td>
      <td><input type='text' value='Add New -->'></td>
      <td><input type='button' class='AddNew' value='Add new item'></td>
    </tr>
  </table>
</div>
</body>
</html>

JavaScript

// Global event delegates (only bind once, not every modal open)
$(document).on('click', '.AddNew', function() {
  var row = $(this).closest('tr').clone();
  row.find('input').val('');
  $(this).closest('tr').after(row);
  $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});

$(document).on('click', '.RemoveRow', function() {
  $(this).closest('tr').remove();
});

// Safety Modal Logic
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
  s_news.style.display = "block";
}

var snews_span = document.getElementsByClassName("s_newsclose")[0];
snews_span.onclick = function() {
  s_news.style.display = "none";
}

window.addEventListener("click", function(s_newsevent) {
  if (s_newsevent.target == s_news) {
    s_news.style.display = "none";
  }
});

// Operate Modal Logic
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
  qi_news.style.display = "block";
}

var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
qinews_span.onclick = function() {
  qi_news.style.display = "none";
}

window.addEventListener("click", function(qi_newsevent) {
  if (qi_newsevent.target == qi_news) {
    qi_news.style.display = "none";
  }
});

CSS

/* News Feed (background) */
.s_news, .qi_news {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}
.headercolor {
  background-color: rgba(255, 0, 0, 1);
}
/* The Newsfeed Close Button */
.s_newsclose, .qi_newsclose {
  color: #aaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
}

关键修复点 #

• Moved event handlers to global scope: Instead of attaching .AddNew and .RemoveRow click handlers every time a modal opens, we use jQuery's event delegation ($(document).on()) to bind these handlers once when the page loads. This way, even new rows added dynamically will work, and we avoid stacking multiple handlers on the same buttons.
• Removed duplicate bindings: The original code was adding a new click handler to all .AddNew buttons every time you clicked a header to open a modal. Now, we only bind these handlers once, so each click on "Add new item" triggers exactly one row addition.

内容的提问来源于stack exchange，提问作者Mark Kho