jquery功能无法正常工作后.html重新加载

我有一个页面，其中包含最初从include_once('show_calendarV2.php');行加载的项目列表。jquery功能无法正常工作后.html重新加载

在每个项目旁边都有一个删除图标，它会触发以下jquery从db中删除项目，然后更新页面。

$('.delete_schedule_item').click(function() { 
    var id = $(this).next('input[type=hidden]').attr('value'); 
    alert (id); 

    $.ajax({ 
      url: 'ajax/delete_schedule_item.php', 
      type: 'post', 
      data: { id: id }, 
      dataType: 'json', // get back status of request in JSON 
      success: function(data) 
      { 
       //alert('item deleted'); 
      } 
     //   if (data.status) { 
     //   alert('success'); 
     //   } 
     //   else { 
     //    alert('error'); 
     //   }, 
     //... other parameters/callbacks ... 
     }); 

    $.get('show_calendarV2.php', {},  
     function(data) 
     { 
     //load the calendar data 
     $("#calendar").html(data); 

     }); 
    });

一切工作正常，第一次删除一个项目。该项目被删除。加载新页面。

但是在页面加载删除按钮后？ jquery调用？不再起作用。

相同的页面用于创建初始显示以及刷新的页面，所以我不确定代码失败的原因。

想法？

来源

2009-09-10 ian

尝试改变

$('.delete_schedule_item').click(function() {

到

$('.delete_schedule_item').live("click", function() {

如果加载了一堆新的HTML的，你跑前并不适用于它了该功能。而且，由于您是通过Ajax加载的，因此一旦完成加载，该函数就不会再次执行。

jQuery中live()和die()函数的优点在于它们处理这种情况。无论何时载入与选择器相匹配的新内容，新元素都会自动更新。

来源

2009-09-10 18:50:43 womp

Wooo。这是什么.live和为什么.click只能工作一次？ – ian 2009-09-10 18:54:21

这是它的文档。它解释得很好。 http://docs.jquery.com/Events/live。从本质上讲，它使用事件委托来处理单击事件的祖先元素，并查看它发生的位置，以及它是否发生在与您的选择器相匹配的东西上，那么它就是事情。 – womp 2009-09-10 18:58:57

好吧，不像普通的javascript，每次点击时都会发生...因为这个jquery和onready（）函数内部只会发生一次，除非我使用live（）函数。 – ian 2009-09-10 19:01:15

使用事件代表团：

$('.delete_schedule_item').live("click", function() {...

使用live会自动事件处理程序重新安装到新注入的元素事件代表团。当你用ajax替换你的网页中的新内容时，任何绑定到'old'元素的事件处理程序都不会自动重新连接到新注入的元素，除非你使用事件委托（或重新附加事件处理程序在你的ajax方法的回调中）。

要使用live进行事件委托，您需要使用jQuery 1.3或更高版本。

来源

2009-09-10 18:51:14 karim79

它不再工作的原因是事件处理程序被添加到DOM元素本身。当您通过AJAX加载新的HTML时，附有事件处理程序的旧元素将被删除，并且不包含处理程序的新元素将替换它们的位置。有两种可能的解决方案：首先，您可以将处理程序重新应用到新加载的HTML。只需重新运行在已加载的HTML上设置事件处理程序的代码即可。另一个选项，你可以在这种情况下使用，因为click事件是由live处理的，使用live事件处理程序作为@womp和@ karim79的建议。

请注意，活动处理程序有一些限制 - 它们不适用于所有类型的事件（点击作品），并且它们无法与传播一起正常工作（即停止传播不起作用）。有关更多信息，请参阅live的jQuery文档。

来源

2009-09-10 18:59:15 tvanfosson

所以当我打电话时， $（document）.ready（function（）事件处理程序附加到DOM对象上，但是当我删除该HTML并通过我的ajax调用替换掉那些链接时，这些链接被销毁了 – ian 2009-09-10 19:08:43

是的，处理程序使用DOM元素和在删除它们时会被删除。 – tvanfosson 2009-09-10 19:35:42

jquery功能无法正常工作后.html重新加载

回答

相关问题