我正在构建一个需要动态删除表的网站。我正在使用 Bootstrap以 CSS 和 JQuery 1.11.2 为大脑。我也在使用 Parse.com，但在我的所有其他页面上一切正常。问题不在于加载我的任何 JQuery 代码，而是在不知道 ID 的情况下删除给定行时激活此特定 Angular 色。
我隐藏了名为“创建碗”的“页面”，但可以通过单击右侧导航栏来访问它。
我应该能够点击这个删除按钮并相应地删除该行。 
我正在使用的 HTML 是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Off Canvas Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom/dashboardMain.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- navigation bar at the top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="" id="dashboard_home_title_link">DePauw Prindle Ethics Bowls</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
<li><a href="" id="dashboard_log_out">Log Out</a></li>
</ul>
<!--<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form> -->
</div>
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<!-- Giant intro -->
<div class="jumbotron">
<h1 id="dashboard_title_intro"></h1>
<p>Take a look around. Here you can coordinate ethics bowl with the simplicity and power of our web application.</p>
</div>
<!-- HOME CONTENT -->
<div class="row" id="dashboard_content_home">
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
<!-- Ethic bowl CONTENT -->
<div class="row" id="dashboard_ethic_bowls">
<div class="row placeholders">
<div class="col-md-12 text-center">
<h1>Ethic Bowls</h1>
<button type="button" class="btn btn-lg btn-info" id="dashboard_add_ethic_bowl"> + </button>
</div>
</div>
<!-- the list of ethic bowls for a given user -->
<div class="table-responsive foo">
<table class="table table-striped" id="dashboard_ethic_bowl_list">
<thead>
<tr>
<th>Title</th>
<th>Location</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="dashboard_ethic_bowl_rows">
<tr>
<td>tempTitle</td>
<td>tempLocation</td>
<td>tempDate</td>
<td>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">
<span>Actions</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">
<li><button class="btn btn-primary">View</button></li>
<br>
<li><button class="btn btn-warning">Edit</button></li>
<br>
<li><button class="btn btn-danger" id="deleteBowl">Delete</button></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div><!--/dashboard_ethic_bowl_list-->
</div><!--/dashboard_ethic_bowls-->
</div><!--/.col-xs-12.col-sm-9-->
<!-- left side navigation bar for content area -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item" id="dashboard_nav_home">Home</a>
<a href="#" class="list-group-item" id="dashboard_nav_ethic_bowls">Create Bowls</a>
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© DePauw University 2015</p>
</footer>
</div><!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<script src="js/parse/dashboardMainjs.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
问题是，当我尝试单击行中的“操作”->“删除”时，它什么也没做。我正在尝试使用 $(this).closest('tr').remove(); 但部分问题是尽管引用了正确的通用 ID，但它似乎从未被调用过。我引用它是错误的还是什么？我正在使用 onclick 函数“#dashboard_add_ethic_bowl”动态添加行。
$(function()
{
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
$("#dashboard_nav_home").click(function(event)
{
// http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
event.preventDefault();
showHome();
hideAddCoachSchool();
});
$("#dashboard_nav_ethic_bowls").click(function(event)
{
event.preventDefault();
$("#dashboard_content_home").hide();
$("#dashboard_ethic_bowls").show();
});
// TODO: these arent working yet
// http://stackoverflow.com/questions/23249130/delete-table-row-using-jquery
$(".btn btn-danger").click(function(){
alert('awwwwww');
});
$('#deleteBowl').click(function (event) {
event.preventDefault();
alert("aa");
$(this).closest('tr').remove();
return false;
});
$("#dashboard_add_ethic_bowl").click(function(event)
{
event.preventDefault();
var rowContent = '<tr>' +
'<td>' + 'tempTitle' + '</td>' +
'<td>' + 'tempLocation' + '</td>' +
'<td>' + 'tempDate' + '</td>' +
'<td>' +
'<div class="btn-group">' +
'<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">' +
'<span>Actions</span> <span class="caret"></span>' +
'</button>' +
'<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">' +
'<li><button class="btn btn-primary">View</button></li>' +
'<br>' +
'<li><button class="btn btn-warning">Edit</button></li>' +
'<br>' +
'<li><button class="btn btn-danger" id="deleteBowl">Delete</button></li>' +
'</ul>' +
'</div>' +
'</td>' +
'</tr>';
$("#dashboard_ethic_bowl_list").show();
$('#dashboard_ethic_bowl_rows').append(rowContent);
});
// declare simple log out
$("#dashboard_log_out").click(function(event)
{
event.preventDefault();
});
}
function hideHome()
{
$("#dashboard_content_home").hide();
}
function showHome()
{
$("#dashboard_content_home").show();
}
function hideAddCoachSchool()
{
$("#dashboard_ethic_bowls").hide();
}
function showAddCoachSchool()
{
$("#dashboard_ethic_bowls").show();
}
编辑:我现在刚刚尝试在 HTML 中使用硬编码行，它与 onclick 和删除一起使用，但如果我通过单击大“+”按钮动态添加它们，则不会。是否有正确的方法来引用要删除的动态添加的行？
最佳答案
对动态创建的元素使用事件委托(delegate):
$('#dashboard_ethic_bowl_list').on('click','.btn', function(event){
event.preventDefault();
alert("aa");
$(this).closest('tr').remove();
return false;
});
也使用唯一 ID。
每次您动态添加新行时，您的 id="deleteBowl" 都会重复。 ID 必须是唯一的。最好将其作为一个类并使用它。
...<li><button class="btn btn-danger deleteBowl">...
^^^^^^^^^
$('#dashboard_ethic_bowl_list').on('click','.deleteBowl', function(event){
event.preventDefault();
alert("aa");
$(this).closest('tr').remove();
return false;
});
关于javascript - jQuery 动态删除表行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30506810/