Question

我有一个页面，其中包含最初从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调用？不再有功能了。

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

想法？

Answer 1

尝试更改

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

到

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

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

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

Answer 2

使用事件委托：

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

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

对于live工作的事件委派，您需要使用jQuery 1.3或更高版本。

Answer 3

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

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

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

3 个答案: