0
我正在建立一个需要动态删除表格的网站。我使用的是用于CSS和JQuery 1.11.2的Bootstrap作为大脑。我也使用Parse.com，但所有其他页面上的工作都很好。问题不在于加载我的任何JQuery代码，而是在不知道ID的情况下删除给定行时激活此特定角色。JQuery动态删除表格行
我隐藏了名为“创建碗”的'页面'，但它可以通过单击右侧导航栏进行访问。
我应该可以点击这个删除按钮，并相应地删除该行。 
我一起工作的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();
}
编辑：我只是用它的onclick和拆除工程的HTML中的硬编码行现在试过但如果我通过点击大的“+”按钮，动态地添加他们。有没有适当的方法来引用一个动态添加的行被删除？
为什么使用'console.log（）'，因为警报会阻止您的处理 – Mivaweb
为什么要使用所有警报？这与缺少删除无关。我可以将它从警报更改为console.log（），但应该有一个解决方案来解决这个问题。 – booky99