Question

这就是我要做的事情。我有一个显示项目列表的页面，每个项目旁边都有一个删除链接。当用户单击该链接时，将加载删除确认页面。如果用户单击＆＃34;否＆＃34;，则加载列表页面。其他事情与这个问题无关。

这在PHP中运行良好，但现在我尝试使用jQuery使用AJAX加载所有内容。我使用此代码：

$(document).ready(function(){
  $('a[class="link-delete"]').click(function(e){

    $.get(e.target.href, function(data){
      $('#main').html(data);  //loads the delete confirmation page

      $('#delete-button').click(function(e_delete){
        //User clicked "Yes", not relevant here
      });

      $('#cancel-button').click(function(e_cancel){
        e_cancel.preventDefault();
        $.get(e_cancel.target.href, function(data){
          $('#main').html(data); //loads the list page, that is starting page
          //I think I'm getting stuck here
        });
      });

    });
    e.preventDefault();
  });
});

因此，当用户从列表中单击“删除”链接时，将调用PHP后端，并且页面的一部分将按顺序加载并正确显示。到现在为止还挺好。然后，当用户点击＆＃34;否＆＃34; （取消按钮），列表通过AJAX加载并显示。但是，当用户现在单击删除链接时，不会执行jQuery。它只在刷新后才有效。我相信我已经陷入困境了＃34;我在代码中指出的地方。

我甚至不知道这里的正确术语，但我希望你能理解我想要做的事情。我想加载一个页面，仍然能够使用相同的jQuery代码捕获事件。甚至可以使用jQuery以及如何做到这一点？我可以将.load（）与回调一起使用，如果是，怎么办？

Answer 1

我猜它是因为那些通过Ajax加载的a[class="link-delete"]元素没有附加事件处理程序。它们是在您的页面加载后创建的。

您需要查看事件委派（http://learn.jquery.com/events/event-delegation/）。将事件侦听器分配给包含这些链接的元素，并在通过xhr更新文档后仍然存在。

像

这样的东西

$('body').on('click', 'a[class="link-delete"]', function(e) {
    // your event handler
});

应该这样做。

Answer 2

尝试：

$('body').on('click','a[class="link-delete"]',function(e){
       e.preventDefault();
    $.get(e.target.href, function(data){
      $('#main').html(data);  //loads the delete confirmation page
    });
 });
$('body').on('click','#delete-button',function(e){
  //User clicked "Yes", not relevant here
});

 $('body').on('click','#cancel-button',function(e){
    e.preventDefault();
    $.get(e.target.href, function(data){
       $('#main').html(data); //loads the list page, that is starting page
          //I think I'm getting stuck here
        });
      });

使用jQuery / AJAX加载循环页面

2 个答案: