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_#，其中＆＃34;＃＆＃34;是要更改的页面的部分编号。

一切正常。

但是，由ajax调用返回的HTML中的按钮具有与它们关联的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的元素

通过ajax注入HTML后刷新/重新加载jquery操作

1 个答案: