Node.js ajax调用以更新jade部分模板

当我用部分jade模板更新div内容时遇到问题。删除用户的第一个ajax调用工作正常，div内容也会更新，但当我再次单击删除其他用户时，ajax操作不会被调用。我看不出问题出在哪里

这是我的密码

查看/布局。jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    .container
        block content
    block footer
      script(type='text/javascript' src='/javascripts/jquery.min.js')
      script(type='text/javascript' src='/javascripts/functions.js')

extends layout

block content   
    include menu.jade
    #users_list
        include users.jade

table
    thead
      tr
        th Id
        th Name
        th Description
        th(colspan='2') Actions
    tbody
      if(users)
        each user in users
          tr
            td #{user.id}
            td 
              a(id=user.id href='#') #{user.name}
            td                  
              a(id=user.id href='#') #{user.description}
            td
              a(class='user_edit' id=user.id href='#' ) 
                img(id=user.id src="images/edit.png")
            td
              a(class='user_delete' id=user.id href='#') 
                img(id=user.name src="images/trash.png")

查看/索引.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    .container
        block content
    block footer
      script(type='text/javascript' src='/javascripts/jquery.min.js')
      script(type='text/javascript' src='/javascripts/functions.js')

extends layout

block content   
    include menu.jade
    #users_list
        include users.jade

table
    thead
      tr
        th Id
        th Name
        th Description
        th(colspan='2') Actions
    tbody
      if(users)
        each user in users
          tr
            td #{user.id}
            td 
              a(id=user.id href='#') #{user.name}
            td                  
              a(id=user.id href='#') #{user.description}
            td
              a(class='user_edit' id=user.id href='#' ) 
                img(id=user.id src="images/edit.png")
            td
              a(class='user_delete' id=user.id href='#') 
                img(id=user.name src="images/trash.png")

查看/用户。jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    .container
        block content
    block footer
      script(type='text/javascript' src='/javascripts/jquery.min.js')
      script(type='text/javascript' src='/javascripts/functions.js')

extends layout

block content   
    include menu.jade
    #users_list
        include users.jade

table
    thead
      tr
        th Id
        th Name
        th Description
        th(colspan='2') Actions
    tbody
      if(users)
        each user in users
          tr
            td #{user.id}
            td 
              a(id=user.id href='#') #{user.name}
            td                  
              a(id=user.id href='#') #{user.description}
            td
              a(class='user_edit' id=user.id href='#' ) 
                img(id=user.id src="images/edit.png")
            td
              a(class='user_delete' id=user.id href='#') 
                img(id=user.name src="images/trash.png")

routes/index.js

router.get('/deleteUser/:userid', function (req, res) {

    UserModel.deleteUser({userid: req.params.userid}, function(error, data){        
        res.render('users', {          
            users : data
        });
    });
});

  $(document).ready(function(){
    //others functions and variables here!!!!!

    $('.user_delete').on('click', function(e) {
        e.preventDefault();
        var userid = $(this).attr('id');    
        $.ajax({
            method: 'GET',
            url: baseurl + 'deleteUser/'+userid,
            dataType: 'html',
            success: function(data){
                $('#users_list').html(data);
             },
         });
     });
}

javascripts/functions.js

router.get('/deleteUser/:userid', function (req, res) {

    UserModel.deleteUser({userid: req.params.userid}, function(error, data){        
        res.render('users', {          
            users : data
        });
    });
});

  $(document).ready(function(){
    //others functions and variables here!!!!!

    $('.user_delete').on('click', function(e) {
        e.preventDefault();
        var userid = $(this).attr('id');    
        $.ajax({
            method: 'GET',
            url: baseurl + 'deleteUser/'+userid,
            dataType: 'html',
            success: function(data){
                $('#users_list').html(data);
             },
         });
     });
}

---

感谢

原因是您将事件处理程序绑定到网页中已呈现的元素。单击“删除”并触发事件处理程序时，所有这些元素都将从页面中删除并替换为新内容，如下所示：

success: function(data){
    $('#users_list').html(data);
},

最简单的解决方案是将事件处理程序绑定到您知道仍将在页面上的元素，并使用

选择器
参数到
on
以筛选您希望绑定到的元素。此事件处理程序将绑定到您从未从页面中删除的父元素。当您单击删除链接时，事件将冒泡到该元素，并且由于它与选择器匹配，因此将触发该事件。例如：

$('.container').on('click', '.user_delete', function(e) {
    // as before...
}

作为一个额外的好处，这在浏览器中的性能可能会稍高一些，因为您只将一个事件处理程序绑定到一个元素，而不是多个（我不太确定jQuery的最新版本中是否存在这种情况，但我认为它仍然适用）

也就是说，您绝对不希望在
GET
请求中执行破坏性操作。这是销毁数据的可靠方法
GET
用于获取数据，并始终为同一请求获取相同的数据。使用
POST
请求，或者更好的是，使用
DELETE
请求。
感谢您的快速响应。我会尝试那个解决方案…该死的“复制粘贴”的“获取”操作。