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

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

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

</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){

我在这里更新你的 JSFiddle，http://jsfiddle.net/gschutz/cdhqmp2z/13/。你的问题太长了，不知道我看懂了没有。

这里的一个好习惯是为select和unselect创建一个函数，而不仅仅是addClass。

你是对的，jquery 没有那么清晰，你必须将这些信息保存在另一个变量中。一个好的做法是只使用后端的数据(如 REST)，并且您不需要再次订购选择某些元素，因为 <tr class=”selected”> 不会更改(如果您不重新加载它)。如果您对另一个库感兴趣来制作复杂的应用程序，请尝试 angularjs.org 或 d3js.org。

希望这可以帮助你。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268776.html

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

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

相关推荐

发表回复