jQuery只点击一次，而不是两次
在函数的范围内，我通过AJAX加载HTML以引导模式显示。AJAX负载很昂贵，我希望缓存它加载的内容。但是，HTML中的表行可以动态更改，并需要单击绑定到它们的侦听器。
除了发布一些代码之外，我不知道如何最好地解释这种情况。
小提琴：http://jsfiddle.net/vvc1j1eh/1/
因此，最大的问题是，为什么第一次点击加载就能工作，而不是在我尝试重用缓存的内容之后呢？此外，为什么范围中的第二个加载每次单击都会工作？
编辑：问题的更好解释
加载页面，然后单击" Load“以显示对话框。如果单击某一行，则会弹出与您单击的行有关的警报。单击对话框之外的任何地方以隐藏它，然后再次单击"Load“。这一次，当您单击行时，警报消息将不会弹出。
如果您对范围按钮执行完全相同的处理，则在第二次显示对话框时单击行时仍然会收到警报。
委托：
在一个例子中很难解释，但是AJAX和多个页面一起动态加载内容“文档”页面。当用户导航the应用程序时，会显示和隐藏这些多个页面，所以我不能仅仅将全局侦听器绑定到文档中。
这将是我在尝试授权时所做的最接近的工作：
var $data = expensiveAjaxLoad();
$data.on('click', 'tbody td', function() {
alert($(this).html());
});
$('#load').click(function() {
addRowsAndListeners($data);
$('#content').html($data);
$('#modal').modal('show');
});它仍然没有回答的大问题，这就是为什么事件没有第二次绑定吗？它们第一次绑定，在我进行调试时，范围变量$data似乎没有任何更改。
StackSnippet:
$(document).ready(function() {
//Scope of the function
//$data works the first time, but additional row
//clicks don't register events
var $data = expensiveAjaxLoad();
$('#load').click(function() {
addRowsAndListeners($data);
$('#content').html($data);
$('#modal').modal('show');
});
//Why does this work?
$('#load-scope').click(function() {
var $better = expensiveAjaxLoad();
addRowsAndListeners($better);
$('#content').html($better);
$('#modal').modal('show');
});
});
function expensiveAjaxLoad() {
var html = [];
html.push('<table><tbody>');
html.push('</tbody></table>');
return $(html.join(''));
}
function addRowsAndListeners($data) {
var html = [];
//Rows can vary, don't need to recreate the entire table
for (var i = 0; i < 5; i++) {
html.push('<tr><td>Row ');
html.push((i + 1));
html.push('</td></tr>');
}
$('tbody', $data).html(html.join(''));
//Something here is not binding correctly
$('tbody td', $data).click(function() {
alert($(this).html());
});
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>Hello Alice</h1>
<button id="load">Load</button>
<button id="load-scope">Load With Right Scope</button>
</div>
<div id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div id="content" class="modal-body">
</div>
</div>
</div>
</div>
</body>
</html>
更新：
这是一个新的Fiddle与我目前的生产代码的最低数量。
http://jsfiddle.net/0vb2psv4/1/
Stack Overflow用户
发布于 2014-09-17 14:23:41
您需要在文档上使用事件委托，因为有动态创建的元素。还可以移动文档就绪中的单击事件绑定，而不是函数addRowsAndListeners()
工作实例
$(document).on('click','tbody td',function() {
alert($(this).html());
});更新:使用原始代码，将其委托给内容(表或模型体的容器)，因为表也是动态的。
$("#content").on('click', 'tbody tr', function(e) {
e.preventDefault();
var $this = $(this);
if ($this.hasClass('selectable')) {
$this.toggleClass('success');
}
});更新的小提琴：
https://stackoverflow.com/questions/25892990
复制相似问题
腾讯云开发者
