个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个表，每行都有一个类“.clickablerow”，并且我定义了 onclick 函数，当单击该行时，将显示一个对话框，然后我可以在一些文本上方或下方插入作为新行。问题是，虽然我已将“.clickablerow”添加到这些新添加的行中，但它们实际上不可单击，并且没有显示这样的对话框。
我的代码是这样的:
JS:
$(document).ready(function() {
$(".clickable-row").click(function(){
var i = $(this).rowIndex;
var html = "<tr class='clickable-row' > <td> a test </td></tr>";
$('#table_id > tbody > tr').eq(i).after(html);
});
HTML:
<head>
...
<link rel="stylesheet" href="../static/css/main.css">
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/js/jquery.expander.min.js" type="text/javascript"></script>
<script src="./static/js/main.js" type="text/javascript"></script>
....
<head>
<body>
....
<table>
<tbody>
<tr class='clickable-row' >
<td style="border: 0;"> Initial message ....</td>
</tr>
</tbody>
</table>
....
</body>
如果我单击该行，将添加一个类为“clickable-row”的新行，但是该新行不可单击。任何想法都欢迎!谢谢
最佳答案
就delegate the click event到<table>或<tbody> :
const tableBody = document.getElementById('tableBody');
tableBody.onclick = (e) => {
const target = e.target;
let row = target;
while (!row.classList.contains('clickable-row') && row !== tableBody) row = row.parentElement;
if (row === tableBody) {
return; // Ignore the click if we could not find a .clickable-row
}
const newRow = tableBody.insertRow(target.rowIndex);
newRow.className = Math.random() < 0.5 ? 'clickable-row' : 'disabled-row';
newRow.innerHTML = '<td>...</td>';
};table {
font-family: monospace;
width: 100%;
border-collapse: collapse;
text-align: center;
user-select: none;
}
tr.disabled-row {
background: #EEE;;
}
tr.clickable-row {
cursor: pointer;
}
tr.clickable-row:hover {
background: yellow;
}
td {
border: 2px solid black;
padding: 8px 4px;
}<table>
<tbody id="tableBody">
<tr class="clickable-row"><td>...</td></tr>
</tbody>
</table>使用 jQuery，您可以使用 .on() :
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
前面的示例将如下所示:
$('#tableBody').on('click', '.clickable-row', (e) => {
$(e.currentTarget).after(`<tr class=${ Math.random() < 0.5 ? 'clickable-row' : 'disabled-row' }><td>...</td></tr>`);
});table {
font-family: monospace;
width: 100%;
border-collapse: collapse;
text-align: center;
user-select: none;
}
tr.disabled-row {
background: #EEE;;
}
tr.clickable-row {
cursor: pointer;
}
tr.clickable-row:hover {
background: yellow;
}
td {
border: 2px solid black;
padding: 8px 4px;
}<table>
<tbody id="tableBody">
<tr class="clickable-row"><td>...</td></tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>关于javascript - 如何在 html 表格中启用新添加的行可点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50538507/
26
4
0
我想知道有没有可能做 new PrintWriter(new BufferedWriter(new PrintWriter(s.getOutputStream, true))) 在 Java 中，s
我正在尝试使用 ConcurrentHashMap 初始化 ConcurrentHashMap private final ConcurrentHashMap > myMulitiConcurrent
我只是想知道两个不同的新对象初始化器之间是否有任何区别，还是仅仅是语法糖。 因此: Dim _StreamReader as New Streamreader(mystream) 与以下内容不同: D
在 C++ 中，以下两种动态对象创建之间的确切区别是什么: A* pA = new A; A* pA = new A(); 我做了一些测试，但似乎在这两种情况下，都调用了默认构造函数，并且只调用了它。
我已经阅读了其他帖子，但它们没有解决我的问题。环境为VB 2008(2.0 Framework)下面的代码在 xslt.Load 行导致 XSLT 编译错误下面是错误的输出。我将 XSLT 作为字符串
我想知道为什么alert(new Boolean(false))打印 false 而不是打印对象，因为 new Boolean 应该返回对象。如果我使用 console.log(new Boolean
本文实例讲述了Python装饰器用法。分享给大家供大家参考，具体如下： 写装饰器 装饰器只不过是一种函数，接收被装饰的可调用对象作为它的唯一参数，然后返回一个可调用对象（就像前面的简单例子） 注
我可以编写 YAML header 来使用 knit 为 R Markdown 文件生成多种输出格式吗？我无法重现 the original question with this title 的答案中
我可以编写一个YAML标头以使用knitr为R Markdown文件生成多种输出格式吗？我无法重现the original question with this title答案中描述的功能。 这个降价
我正在使用vars package可视化脉冲响应。示例: library(vars) Canada % names ir % `$`(irf) %>% `[[`(variables[e])) %>%
我有一个容器类，它有一个通用参数，该参数被限制到某个基类。提供给泛型的类型是基类约束的子类。子类使用方法隐藏(新)来更改基类方法的行为(不，我不能将其设为虚拟，因为它不是我的代码)。我的问题是"new
Java 在提示! cannot find symbol symbol : constructor Bar() location: class Bar JPanel panel =
在我的应用程序中，一个新的 Activity 从触摸按钮(而不是点击)开始，而且我没有抬起手指并希望在新的 Activity 中跟踪触摸的 Action 。第二个 Activity 中的触摸监听器不响
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，
和我的last question ，我的程序无法检测到一个短语并将其与第一行以外的任何行匹配。但是，我已经解决并回答了。但现在我需要一个新的 def函数，它删除某个(给定 refName )联系人及其
这个问题在这里已经有了答案: Horizontal list items (7 个答案) 关闭 9 年前。
我想创建一个新的 float 类型，大小为 128 位，指数为 4 字节(32 位)，小数为 12 字节(96 位)，我该怎么做输入 C++，我将能够在其中进行输入、输出、+、-、*、/操作。 [我正
我在放置引用计数指针的实例时遇到问题 类到我的数组类中。使用调试器，似乎永远不会调用构造函数(这会扰乱引用计数并导致行中出现段错误)! 我的 push_back 函数是: void push_back
我在我们的代码库中发现了经典的新建/删除不匹配错误，如下所示: char *foo = new char[10]; // do something delete foo; // instead of
A *a = new A(); 这是创建一个指针还是一个对象？ 我是一个 c++ 初学者，所以我想了解这个区别。 最佳答案 两者:您创建了一个新的 A 实例(一个对象)，并创建了一个指向它的名为 a
我是一名优秀的程序员,十分优秀！