每次尝试单击关联的按钮时,我都试图创建一个新的表行。但是,一旦单击按钮并选择行,它就不会突出显示。我有一个append
函数,该函数将<tr>
传递给html。我的最终目标是使添加的新行变为可单击并可以选择。
代码:
<div class="col-md-3 left-pane">
<div class="row justify-content-md-center">
<button class="btn btn-sm btn-block eNew">New Tier</button>
</div>
<hr>
<table class="table table-sm table-hover tAdd">
<tbody>
<tr>
<td>IIS</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>SQL</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>Windows File Share</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>Etc</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
</tbody>
</table>
</div>
Javascript:
$(".eNew").on("click", function(event){
$(".tAdd tbody").append(
"<tr>" +
"<td>New Selector</td>" +
"<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
"</tr>"
);
$(".tAdd tr").click(function() {
$(".tAdd tr").removeAttr('class');
$(this).toggleClass("table-active");
});
此外,它适用于html文件中的原始<tr>
,但由于某些原因,当我追加表格行时,它不起作用。
答案 0 :(得分:2)
这完全是由于以下事实:使用您声明的事件处理程序未绑定动态内容:
$(".eNew").on("click", function(event){
尽管这将在代码首次运行时绑定到所有.eNew
元素,但不会绑定新元素。
相反,绑定到文档并指定.eNew
作为click事件的选择器,它将起作用:
$(document).on("click", ".eNew", function(event){
根据OP上的有关无效的评论进行修改
只需验证您的代码现在应如下所示:
$(document).on("click", ".eNew", function(event){
$(".tAdd tbody").append(
"<tr>" +
"<td>New Selector</td>" +
"<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
"</tr>"
);
});
$(document).on("click", ".tAdd tr", function(event){
$(".tAdd tr").removeAttr('class');
$(this).toggleClass("table-active");
});