ajax调用来更新玉的部分模板

当我使用部分玉石模板更新div内容时遇到了麻烦。 第一个Ajax调用删除用户工作正常，div内容更新，但是当我再次点击删除其他用户时，不会调用ajax操作。 我看不出问题在哪里。

这是我的代码

视图/ layout.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') 

视图/ index.jade

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

视图/ 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") 

路线/ index.js

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

Java脚本/ functions.js

  $(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); }, }); }); } 

谢谢

Answer 1

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

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

最简单的解决scheme是将事件处理程序绑定到您知道仍然在页面on的元素，并使用selector参数on筛选要绑定到的元素。 这个事件处理程序将被绑定到你永远不会从页面中移除的父元素。 当你点击一个删除链接时，事件将冒泡到该元素，并且由于它匹配select器，事件将被触发。 例如：

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

作为一个额外的好处，这可能是稍微更高性能的浏览器，因为你只绑定一个事件处理程序的一个元素，而不是许多（我不太确定这个在最近版本的jQuery，但我认为它仍然是真实的）。

这就是说，你绝对不希望在GET请求中有破坏性的行为。 这是销毁数据的一个肯定的方式。 GET意味着获取数据，并且始终为相同的请求获取相同的数据。 为此使用POST请求，甚至更好地使用DELETE请求。