1

你好，

编辑：正如你们大多数人建议的那样，我尝试使用.on()而不是.live()。但它没有帮助。这个问题不仅在于 ajax 调用，甚至尝试使用 jquery 添加新元素，事件未注册到新创建的元素。
我在下面更改了我的脚本。
如果在现有表上触发单击事件，我将添加新表。单击事件对于第一个表触发良好，但对于脚本新添加的下一个表则不触发。
我认为问题出在.each(). 此功能不适用于新添加的元素。有什么方法可以解决这个问题吗？

我有一个 html 页面，其中内容由 ajax 事件更改。我想将点击事件注册到我的页面包含的所有表中。第一次它工作正常但是一旦内容被 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"，则应注册事件。检查我认为“每个”循环是强制性的。

任何帮助表示赞赏。

4

7 回答 7

2

使用on()代替live()

你想要这样的东西吗？

jsfiddle

于 2012-08-22T14:33:53.183 回答
1

您应该在on为动态加载的元素附加事件处理程序时使用该方法。该live方法在最新版本的 jQuery 中已被弃用（如果还没有，那么它将被弃用）。

例子：

$(document).on('tbody td', 'click', function(){
    alert('hi');
});
于 2012-08-22T14:40:05.297 回答
0

我猜您需要将代码放在成功$.ajax()回调中：

$.ajax({
    url: 'page.html',
    success: function(data) {
        $('table[clk=true] tbody tr td').on('click', function() {
            alert("Hi..");
        });
    }
});
于 2012-08-22T14:48:59.470 回答
0

.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");
});
于 2012-08-22T14:35:34.837 回答
0

我想你想要这样的东西：

$("table[clk='true']").on("click", "tbody td", function(){
    alert("Hi.."); 
});
于 2012-08-22T14:36:03.800 回答
0

您需要将委托事件附加到由 ajax 更改的元素的父容器。前任。如果您设置了整个表格，则需要将事件附加到正文上。

$('body').on('click', 'td', function(){ 
    // your function here
});

如果您将委托事件附加到由 ajax 重新加载的元素，它将不起作用。

于 2013-03-06T00:47:22.093 回答
0

似乎您使用的是 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');
       });
   }
});

​</p>

于 2012-08-22T14:42:49.157 回答