关于 javascript：JQuery 在 .change() 处理程序之后通过 .load() 重新加载表时丢失初始单击事件

JQuery losing initial click event when reloading a table via .load() after a .change() handler

我正在处理一个复杂的应用程序，其中有两个 div，每个 div 都包含一个单独页面的 HTML/JS。每个 div 都加载到 $(document).ready() 脚本中。顶部 div 包含一个表格，底部 div 包含一个表单。

这两个页??面是绑定(链接)的，如果您单击表格中的一行，它会突出显示该城镇并通过刷新表单 div 将该行数据加载到表单中。此外，如果您更改(编辑)数据表单中的任何字段，它将通过重新加载表格的 HTML 来自动刷新表格，该表格中当前选定的行保持选中状态。

由于更大系统的设计，我对基本方法没有任何控制(两个 div 都在运行中重新加载以反映另一个的变化)。这两个文件实际上并没有相互绑定，而是绑定到 MVC 设计中使用的数据库。

在我的应用程序中，一切正常...单击顶部的一行，您将获得以下数据。更改表单中的值，然后触发 change() 事件(点击 tab、单击字段等)并刷新上表。 C'est tres beaux.

除了...有一个小错误，即当您通过单击表中的一行来触发 change() 事件时，一切正常，除了您单击的行没有获得初始点击事件和该行未突出显示。

这大概是因为表格页面的刷新导致点击事件在最终得到解决时失败(在change()事件之后)。我想我可能可以保存在 cookie 或其他内容中单击的行的标识，然后在加载的 ready() 函数上对其进行检查，但我终其一生都无法在任何地方捕获该初始事件。

我已经创建了一个更简单的问题版本，它以同样的方式失败，并在 http://jsfiddle.net/AKirino/cdhqmp2z/ 创建了一个小提琴。

由于小提琴没有执行表文件中的 ready() 代码的一些问题，我已将所有 js 移至基本文件。我还将表单部分集成到主页中以简化操作。

在测试代码中你可以：

单击表中的一行，该行的文本出现在下部窗口中。

在下部窗口中更改一个值，然后点击选项卡或单击它，它将出现在表格中。

但是，如果您更改表单中的字段，然后通过单击表格中的一行来触发 change() 事件，则表格行不会突出显示。

有什么方法可以在页面刷新之前捕获点击行的初始事件？

这是我的原始(小提琴前)测试代码。我在 OSX 上的 Safari 中工作并使用 query-1.9.1.

CSS:

1
2
3
4
5
6
7
8

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;}

基础文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<html><head>
<meta charset='utf-8'>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'>
<link rel="stylesheet" href="refreshTest.css" type="text/css" />
</head>
<body>

$(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');

});
});

<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>

</body>
</html>

表格文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<html><head><script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></head>
<body>

$(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());
});
});

<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>

我已将以下示例用于在初始页面加载后加载的按钮。

1
2
3
4
5
6
7

$(document).on("click",".button-class", obj.eventName);
// where obj.eventName is just a method on my js obj
// or
$(document).on("click",".button-class", function(evt){
// do something
evt.preventDefault();
});

你需要改为on()。 delegate() 处理程序已被弃用(从 jQuery 1.7 开始) -

1	$('table').on('click', 'tr', function(evt){