.html 重新加载后 jquery 函数无法正常工作答案

【问题标题】：jquery functions not working properly after .html reload.html 重新加载后 jquery 函数无法正常工作
【发布时间】：2009-09-10 18:48:36
【问题描述】：

我有一个页面，其中包含最初从 include_once('show_calendarV2.php'); 行加载的项目列表。

每个项目旁边是一个删除图标，触发以下jquery从数据库中删除该项目，然后更新页面。

$('.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 调用？不再起作用。

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

想法？

【问题讨论】：

标签： php jquery

【解决方案1】：

尝试改变

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

到

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

如果你加载一堆新的 html，你之前运行的函数将不再适用于它。而且由于您是通过 Ajax 加载它，因此一旦加载完成，该函数就不会再次执行。

jquery 中live() 和die() 函数的美妙之处在于它们可以处理这种情况。每当加载与选择器匹配的新元素时，新元素都会自动更新。

【讨论】：

这里是它的文档。它很好地解释了它。 docs.jquery.com/Events/live。本质上，它使用事件委托给祖先元素，该元素处理点击事件并查看它发生的位置，如果它发生在与您的选择器匹配的东西上，那么它就是这样做的。
好吧，不像普通的javascript，每次点击时都会发生onclick...因为这个jquery和onready()函数内部只会发生一次，除非我使用live()函数。跨度>

【解决方案2】：

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

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

【讨论】：

所以当我打电话时； $(document).ready(function() 事件处理程序附加到 DOM 对象。但是当我删除该 HTML 并通过我的 ajax 调用替换时，这些链接被破坏。
是的。处理程序与 DOM 元素一起使用，并在您移除它们时被移除。

【解决方案3】：

使用事件委托：

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

使用live 的事件委托将自动将事件处理程序重新附加到新注入的元素。当您通过 ajax 将网页的一部分替换为新内容时，任何绑定到“旧”元素的事件处理程序都不会自动重新附加到新注入的事件处理程序，除非您使用事件委托（或重新附加事件处理程序在您的 ajax 方法的回调中）。

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

【讨论】：