【发布时间】：2014-09-30 20:43:28
【问题描述】：
我正在处理一个复杂的应用程序，其中有两个 div，每个 div 都包含一个单独页面的 HTML/JS。每个 div 都加载到 $(document).ready() 脚本中。顶部 div 包含一个表格，底部 div 包含一个表单。
这两个页面是绑定（链接）的，如果您单击表格中的一行，它会突出显示该城镇并通过刷新表单 div 将该行数据加载到表单中。此外，如果您更改（编辑）数据表单中的任何字段，它将通过重新加载该表的 HTML 来自动刷新该表，该表中当前选定的行保持选中状态。
由于更大系统的设计，我无法真正控制基本方法（两个 div 都在运行中重新加载以反映另一个 div 的变化）。这两个文件实际上并没有相互绑定，而是绑定到 MVC 设计中使用的数据库。
在我的应用程序中，一切正常...单击顶部的一行，您将获得以下数据。更改表单中的值，然后触发change() 事件（点击tab，单击关闭字段等）并刷新上表。 C'est tres beaux.
除了...有一个小错误，即当您通过单击表格中的一行来触发 change() 事件时，一切正常，除了您单击的行没有获得初始点击事件和该行没有突出显示。
这大概是因为表格页面的刷新导致点击事件在最终解决时失败（在change()事件之后）。我想我可能会保存在 cookie 或其他内容中单击的行的标识，然后在加载的 ready() 函数上对其进行检查，但我终其一生都无法在任何地方捕获该初始事件。
我已经创建了一个更简单的问题版本，它以同样的方式失败并在http://jsfiddle.net/AKirino/cdhqmp2z/ 创建了一个小提琴。
由于小提琴没有执行表文件中的ready() 代码的一些问题，我已将所有 js 移至基本文件。我还将表单部分集成到主页中以简化操作。
在测试代码中你可以：
- 单击表格中的一行，该行的文本出现在下方窗口中。
- 在下方窗口中更改一个值，然后点击 Tab 或单击关闭它，它将出现在表格中。
- 但是，如果您更改表单中的字段，然后通过单击表格中的一行来触发
change()事件，则表格行不会突出显示。
有什么方法可以在页面刷新之前捕获点击行的初始事件？
这是我的原始（小提琴前）测试代码。我在 OSX 上的 Safari 中工作并使用 query-1.9.1。
CSS：
div {padding:1em; text-align:center;}
div.page_container {background-color:#C4C4C4; max-width: 80%; margin-left: auto; margin-right: auto;}
div.table_area {background-color:#ffffc0;}
div.working_area {background-color:#c00000;}
table, form {width:15em; margin:0 auto;}
tr.selected {background-color:#ffffff}
td {border: 1px solid; padding:.25em;}
基础文件：
<html><head>
<meta charset='utf-8'>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" href="refreshTest.css" type="text/css" />
</head>
<body>
<script>
$(document).ready(
function( ) {
$('div.table_area').load('refreshTestTable.html');
$('input').change(function(event) {
var id = $(this).attr('id');
console.log('datachanged: '+id);
var myValue = $(this).val();
$('tr#'+id+' td').html(myValue);
$('div.table_area').load('refreshTestTable.html');
});
});
</script>
<div class='page_container'>
<div class='table_area'></div>
<div class='working_area'>
<form id='galleryForm'>
<label for='field1' id='field1_label' >Field1: </label><input id='field1' autocomplete="off" value='This is field 1' /><br />
<label for='field2' id='field2_label' >Field2: </label><input id='field2' autocomplete="off" value='This is field 2' /><br />
<label for='field3' id='field3_label' >Field3: </label><input id='field3' autocomplete="off" value='This is field 3' /><br />
</form>
<div id="console"> </div>
</div>
</div>
</body>
</html>
表格文件：
<html><head><script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script></head>
<body>
<script>
$(document).ready(
function( ) {
$('table').delegate('tr', 'click', function(evt){
var id = $(this).attr('id');
var myLogMsg = 'tr click: '+id;
console.log(myLogMsg);
$('tr').removeClass('selected'); // Unselect all
$(this).addClass('selected'); // Select clicked row
$('div#console').html(myLogMsg);
});
$('input').each(function(){
var myId = $(this).attr('id');
$('tr#'+myId+' td').html($(this).val());
});
});
</script>
<table>
<tr id='field1'><td>fill1</td></tr>
<tr id='field2'><td>fill2</td></tr>
<tr id='field3'><td>fill3</td></tr>
</table>
</body>
</html>
【问题讨论】：
标签： javascript jquery asynchronous dom jquery-events