Question

您好，

编辑：正如大多数人建议我尝试使用.on()而不是.live()。但它没有帮助。这个问题不仅仅是ajax调用，甚至尝试添加新的使用jquery的元素，事件不会注册到新创建的元素。
我在下面更改了脚本。
如果在现有表上触发了click事件，我将添加新表。对于第一个表触发Click事件，但对于新添加的下一个表没有触发脚本。
我认为问题出在.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”，则应注册事件。要检查我认为“每个”循环是必需的。

感谢任何帮助。

Answer 1

使用on()代替live()

你想要这样的东西吗？

jsfiddle

Answer 2

在为动态加载的元素附加事件处理程序时，应使用on方法。在最新版本的jQuery中不推荐live方法（如果没有，那么它将会是）。

示例：

$(document).on('tbody td', 'click', function(){
    alert('hi');
});

Answer 3

.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");
});

Answer 4

我想你想要这样的东西：

$("table[clk='true']").on("click", "tbody td", function(){
    alert("Hi.."); 
});

Answer 5

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

Answer 6

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

$.ajax({
    url: 'page.html',
    success: function(data) {
        $('table[clk=true] tbody tr td').on('click', function() {
            alert("Hi..");
        });
    }
});

Answer 7

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

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

如果将委托事件附加到由ajax重新加载的元素，则它将无效。

没有为Ajax添加的新元素注册Jquery事件

您好，

7 个答案: