Refreshing/reloading jquery 通过 ajax 注入 HTML 后的操作

Question

我有这个功能：

$(function() {
   $("ul#autocomplete_groups").on('click', 'li', (function() {
     // do stuff
     var id = this.id;
     var gid = $("#add_group_members_form_gid").val();
     $.ajax({
       type: 'POST',
       aysnc: true,
       url: '/cgi/script.pl',
       data: "action=add_group_member&voter_id=" + id + "&gid=" + gid,
       success: function(res) {
         $('#div_group_member_list_' + gid).parent().html(res);
         $.growl(
           {title:"Update successful", message:"Person added to group", duration:500, size: 'small' }
         );
       },
     });
   }))
});

这个函数的目的是提供一个自动完成菜单。当用户单击某个项目时，它会触发页面部分的刷新，#div_group_member_list_#，其中“#”是发生更改的页面部分编号。

一切正常。

但是，HTML 中由 ajax 调用返回的具有 jquery 功能的按钮不再起作用。以下是其中一个按钮的外观示例：

<a href="#" class="remove_from_group ui-btn ui-btn-inline" gid="1" vid="85386">Remove</a>

下面是与该按钮关联的操作：

$(function() {
  $(".remove_from_group").on('click', (function() {
    var vid = $( this ).attr( 'vid');
    var gid = $( this ).attr( 'gid');
    row = $(this).parent().parent();
    $.ajax({
      type: 'POST',
      aysnc: true,
      url: '/cgi/script.pl',
      data: "action=remove_from_group&vid=" + vid + "&gid=" + gid,
      success: function(res) {
        // do stuff
        $.growl(
          {title:"Update successful", message:"Member removed from group", duration:500, size: 'small' }
        );
      },
    });
  }))
});

这些按钮在通过第一个函数执行 ajax 调用之前工作正常，但之后完全没有响应。

我查看了此问题的其他答案，但无法弄清楚。由于我是 jquery 和 ajax 的新手，所以我需要一些针对我的问题的特定内容。谢谢！

Answer 1

使用这个

$(document).on('click', ".remove_from_group", function() {...

而不是这个

$(".remove_from_group").on('click', (function() {...

将其附加到文档允许事件触发尚未添加到 dom 的元素

Refreshing/reloading jquery 通过 ajax 注入 HTML 后的操作

Refreshing/reloading jquery actions after injecting HTML via ajax

ajax

jquery

jquery-mobile