【发布时间】：2018-07-07 00:49:31
【问题描述】：
我在标题中遇到了模态问题。当我单击标题“安全”时，它会打开安全模式并设法在每次单击时添加一个项目，这很棒。当我复制第二个标题的代码时，即“操作”。问题开始了。 在我打开 Safety 的模态，添加新项目并关闭模态后，我打开 Operate 的模态并添加新项目。我添加的新项目不是每次点击一行，而是每次点击增加两行，有时每次点击增加三行。
请帮忙。
// Get the that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
s_news.style.display = "block";
$('.AddNew').click(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');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
if (s_newsevent.target == s_news) {
s_news.style.display = "none";
}
});
///
// Get the that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
qi_news.style.display = "block";
$('.AddNew').click(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');
});
$('table').on('click', '.RemoveRow', function() {
$(this).closest('tr').remove();
});
}
// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
if (qi_newsevent.target == qi_news) {
qi_news.style.display = "none";
}
});/* 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;
}<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">×</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">×</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 jquery html css