我有一个 div 网格(在表格中)，所有这些都是可点击的，单击任何一个 div 时，会弹出一个可以填写的模态表单，表单的摘要将显示到相应的 div 中。通过一些非常糟糕的编码，我设法让它工作，但我还需要添加一个“删除”选项来删除该 div 中的所有内容。到目前为止，我在填写表单后在 div 上添加了一个标记为“X”的“a”标签，但它没有清除 div，而是触发了 div 的点击事件，即使我按照其他建议使用了 stopPropogation() 方法线程。
这是我徒劳的尝试:
div的点击事件:
$('.blueBox').click(function(e) {
e.preventDefault();
...}
添加到 div 的标签:
<a class='remove' href='#'>X</a>
标签的点击事件:
$('a').click(function (e) {
e.stopPropogation();
if (this.parentNode && this.parentNode.id){
var parentId=this.parentNode.id;
document.getElementById(parentId).innerHTML = "";
}
});
这是完整的 js 文件:
$(document).ready(function() {
//select all the a tag with name equal to modal
$('.blueBox').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the clicked div
var divId = $(this).attr('id');
$('#dayInfo').text(getDay(divId) + " " + getTime(divId));
$('#btnOk').attr('name', divId);
//Set id to modal dialog
var id = "#dialog";
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
$('.blueBox a.remove').click(function (e) {
//Cancel the link behavior
e.stopPropagation();
// if (this.parentNode && this.parentNode.id){
// var parentId=this.parentNode.id;
// document.getElementById(parentId).innerHTML = "";
// }
this.parentNode.innerHTML = "";
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
//if OK button is clicked
$('.window .ok').click(function (e) {
//Cancel the link behavior
e.preventDefault();
var id = $(this).attr('name');
document.getElementById(id).innerHTML = buildHtml();
$('#mask, .window').hide();
});
});
function buildHtml(){
var output;
output = document.getElementById('txtDept').value + "<br />";
output += document.getElementById('txtModule').value + "<br />";
output += document.getElementById('txtTitle').value + "<br />";
output += document.getElementById('txtHours').value;
output += "<a class='remove' href='#'>X</a>";
return output;
}
这是完整的 html 文件:
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "TeamSite.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jfunc.js"></script>
</head>
<body>
<div id='mainContent'>
<table>
<tr>
<th>09:00 - 09:50</th>
<th>10:00 - 10:50</th>
<th>11:00 - 11:50</th>
<th>12:00 - 12:50</th>
<th>13:00 - 13:50</th>
<th>14:00 - 14:50</th>
<th>15:00 - 15:50</th>
<th>16:00 - 16:50</th>
<th>17:00 - 17:50</th>
</tr>
<tr>
<td><div id="Mon1" class='blueBox'></div></td>
<td><div id="Mon2" class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
<td><div class='blueBox'></div></td>
</tr>
</table>
<a href="#dialog" name="modal">Simple Modal Window</a>
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<!-- close button is defined as close class -->
<a href="#" class="close">Close it</a>
<p id='dayInfo'></p>
<div id='form'>
<form>
<p>
<label>Department: </label><input type="text" id="txtDept" />
</p>
<p>
<label>Module Code: </label><input type="text" id="txtModule" />
</p>
<p>
<label>Module Title: </label><input type="text" id="txtTitle" />
</p>
<p>
<label>No. of hours: </label><input type="text" id="txtHours" />
</p>
<p>
<input type="button" value="OK" class="ok" id="btnOk" /><input type="button" class="close" value="Cancel" id="btnCancel" />
</p>
</form>
</div>
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
</div>
</body>
</html>
最佳答案
使用stopImmediatePropagation()。另外，您可以直接使用 this.parentNode.innerHTML = ""。我已将 a 选择器替换为 .blueBox a.remove，因为只有 .blueBox`` 中的 .remove anchor 会受到影响。
$('.blueBox a.remove').click(function (e) {
e.stopImmediatePropagation();
this.parentNode.innerHTML = "";
});
编辑:支持 A gation。不是传播。
关于javascript - 清除可点击div的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8072682/