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

Jquery event is not being registered for new elements added by Ajax

本文关键字：元素 注册 事件 Jquery 新元素 Ajax 添加      更新时间：2023-09-26

嗨

编辑：正如你们大多数人建议的那样，我尝试了.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重新加载的元素，它将不起作用。

相关文章：