嗨
编辑:正如你们大多数人建议的那样,我尝试了.on()
而不是.live()
。但这无济于事。这个问题不仅存在于ajax调用,甚至尝试使用jquery添加新元素时,事件都不会注册到新创建的元素中
我更改了下面的脚本
如果在现有表上触发了单击事件,则我正在添加新表。对于第一个表,点击事件会被很好地触发,但对于脚本新添加的下一个表,则不会触发
我认为问题出在.each()
上。此函数不适用于新添加的元素。有什么办法解决这个问题吗?
我有一个html页面,其中的内容通过ajax事件进行更改。我想将click事件注册到我的页面包含的所有表中。第一次它运行良好,但一旦ajax更改了内容,就会触发事件
HTML:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
</head>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid;
}
</style>
<body>
<table clk="true">
<thead>
<tr>
<td>S.No</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>Rama Rao</td></tr>
<tr><td>2</td> <td>Tom Cruise</td></tr>
<tr><td>3</td> <td>Tom Honks</td></tr>
<tr><td>4</td> <td>Will Smith</td></tr>
</tbody>
</table>
</body>
脚本:
$('table').each(function(){
if($(this).attr('clk')=="true"){
$(this).find('tbody tr td').live('click',function(){
var str= $('table').html();
str = '<table clk="true">'+str+'</table>';
$('table').after(str);
});
}
});
注意:如果表仅具有属性clk="true",则应注册事件。为了检查我认为"each"循环是强制性的。
感谢您的帮助。
使用on()
而不是live()
你想要这样的东西吗?
jsfiddle
在为动态加载的元素附加事件处理程序时,应该使用on
方法。live
方法在最新版本的jQuery中已被弃用(如果没有,则会被弃用)。
示例:
$(document).on('tbody td', 'click', function(){
alert('hi');
});
.live
与.find
不能正常工作。试试这个:
$('table[slk=true] tbody td').live('click',function(){
alert("Hi");
})
甚至更好的
$('table[slk=true]').delegate('tbody td', 'click', function(){
alert("Hi");
});
如果还添加了新表,请按此方式执行。
$(document).delegate('table[slk=true] tbody td', 'click', function(){
alert("Hi");
});
我想你想要这样的东西:
$("table[clk='true']").on("click", "tbody td", function(){
alert("Hi..");
});
似乎您使用的是jQuery 1.7.1版本,不赞成使用live方法。所以,使用下面的方法。它会起作用的。
$('table').each(function(){
if($(this).attr('clk')=="true"){
var cells = $(this).find('td');
$('body').on('click', cells, function(){
alert('hi');
});
}
});
我猜您需要将代码放入$.ajax()
成功回调:
$.ajax({
url: 'page.html',
success: function(data) {
$('table[clk=true] tbody tr td').on('click', function() {
alert("Hi..");
});
}
});
您需要将委托事件附加到被ajax更改的元素的父容器。例如,如果ajax设置了整个表,则需要将事件附加到主体上。
$('body').on('click', 'td', function(){
// your function here
});
如果您将委托事件附加到ajax重新加载的元素,它将不起作用。