使用部分玉石模板更新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
});
});
});
Javascript角/ 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);
},
});
});
}
由于
答案 0 :(得分:1)
原因是您将事件处理程序绑定到已在网页中呈现的元素。当您单击“删除”并触发事件处理程序时,所有这些元素都将从页面中删除,并替换为新内容,位于:
success: function(data){
$('#users_list').html(data);
},
最简单的解决方案是将事件处理程序绑定到您知道仍将在页面上的元素,并使用selector
参数on
来过滤您希望绑定到的元素。此事件处理程序将绑定到您从未从页面中删除的父元素。当您单击删除链接时,该事件将冒泡到该元素,并且由于它与选择器匹配,因此将触发该事件。例如:
$('.container').on('click', '.user_delete', function(e) {
// as before...
}
作为一个额外的好处,这可能在浏览器中稍微更高效,因为你只将一个事件处理程序绑定到一个元素而不是很多(我在最近的jQuery版本中对此不太确定,但是我认为它仍然适用。)
那就是说,你绝对不想要在GET
请求中进行破坏性操作。这是破坏数据的可靠方法。 GET
用于获取数据,并始终为同一请求获取相同的数据。使用POST
请求,甚至更好的DELETE
请求。