覆盖 <tr> 点击时,在单个单元格中切换模态
Overriding <tr> onclick, toggle modal in single cell
我有一个表格,其中每一行都可以使用
echo "<tr class='"trlink'" onclick='"location.href='".$row['task_id']."''">'n";
那里没有问题。
然后,我在此行的一个单元格内有三个链接。 指向不同页面的两个工作正常。 但是,有一个链接可以切换模式对话框,它不会与标签中包含的onclick一起显示。 没有它就可以正常工作。 我使用以下内容作为
<a role='"button'" href='"#" . $row['task_id'] . "taskModal'" data-toggle='"modal'">
每当单击该链接时,它都会直接转到分配给 的 href。我认为问题在于事件冒泡。 我做了一些谷歌搜索,发现了一个小的Javascript脚本来取消点击模态触发器时的冒泡:
function cancelIt(evt) {
var e = (typeof evt != 'undefined') ? evt : event;
e.cancelBubble = true;
}
和
<a href='"...'" onclick='"cancelIt(event);'" >
在模式触发器上
这解决了单击时加载初始链接的问题,但是模态也不会显示。
感谢您的任何帮助。
如果你使用 jQuery 检测你的页面,我不建议使用 onclick
事件。请改用以编程方式分配的click
处理程序。这可以确保您不会意外踩到某些东西。
如果没有更多详细信息(也许是jsfiddle),很难确定您的特定问题是什么,但是您可以尝试的一件事是将某种选择器添加到适当的锚标记中,然后使用类似于以下内容的范例:
<script>
$(function() {
$('#anchorTagICareAbout').click(function(e) {
e.preventDefault();
displayModalDialog();
});
});
</script>
您可以简单地使用"onmousedown"事件。
<a role='"button'" href='"#" . $row['task_id'] . "taskModal'" data-toggle='"modal'"
onmousedown='"event.cancelBubble=true;event.returnValue=false;document.location.hash=this.getAttribute('href').replace('#','');return false;'">
这里有一个小演示jsfiddle:http://jsfiddle.net/r4dnp/6/
始终首选使用正确的脚本分配的事件处理程序,但上述方法将完成工作。代码的关键部分:
document.location.hash=this.getAttribute('href').replace('#','')
将 document.location.hash 设置为等于链接 HREF 的任何值。
我有一个可行的解决方案。 这可能是一种黑客方法,但它有效。 注意 我还将模态<div>
移到<tr>
之外,因为当我关闭模态时,它将遵循<tr>
的原始 onclick 事件。
<script type="text/javascript">
var trlink = true;
</script>
上面设置了一个变量,单击tr onclick
时要检查。
<tr onclick='"if(trlink) {location.href='google.com'} else { trlink = true; }>
这将在打开链接之前检查 trlink 是否为真,如果不是,则将其设置为 true。
<a onclick="trlink = false" role="button" href="#1printerModal" data-toggle="modal">None</a>
最后,这会在此标记中执行任何操作之前将 trlink 变量设置为 false。
我无法正确处理事件,但这似乎可以解决问题。
- 使用 office.js 在 Excel 中获取单个单元格格式
- 更改表格中单个单元格(TD)的CSS
- 将单个 id 标签添加到表格单元格中,每个循环都有 Rails
- 从 Google Fusion Tables on Click 事件中访问单个单元格值
- 如何在 Google 表格中移动单个单元格
- 电子表格中的单个动态模态/ JS(而不是每个单元格一个)
- AngularJS在ng重复中选择单个表单元格
- 修改JavaScript对象并使用setRowsData写入单个单元格
- 从单个表格单元格移除边框底部
- 是否有一种方法来选择单个单元格使用智能表
- Extjs5 widgetcolumn单个单元格中的多个小部件
- 使用rowspan将重复值单元格合并为具有相同空间的单个单元格
- Ext-JS:如何禁用网格中单个单元格的单元格编辑
- 如何获取单个表单元格的值
- 刷新单个表格单元格,而不刷新整个页面
- 将表单提交中多个单元格的值复制到不同谷歌工作表中的单个单元格中
- 使用JavaScript API更新Google Sheets的单个单元格
- 使用表格's特定(单个)单元格数据
- 在表中使用jQuery显示表外所选行的单个单元格内容
- 覆盖
点击时,在单个单元格中切换模态