如果您不希望每次单击按钮时都绑定新的单击事件,则需要在重新绑定之前取消绑定事件,否则最终会出现多个绑定。
要取消绑定与live()
您绑定的事件,可以使用die()
. 我认为使用die()
with的语法与live()
此类似(未经测试):
$(document).ready(function(){
$('.delete_button').die('click').live('click', function(){
$(this).parent().postAjax(function(data){
if (data.error == true){
}else{
}
}, true);
});
});
但是,如果您使用 jQuery 1.7 或更高版本,请使用自 1.7 以来已弃用的 ason()
而不是live()
as ,并且有许多缺点。
有关所有详细信息,请参阅文档。live()
要使用on()
你可以像这样绑定(我假设它delete_button
是一个动态添加的元素):
$(document).ready(function(){
$(document).off('click', '.delete_button').on('click', '.delete_button', function(){
$(this).parent().postAjax(function(data){
if (data.error == true){
}else{
}
}, true);
});
});
如果您使用的是早期版本的 jQuery,您可以使用undelegate()
orunbind()
和delegate()
代替。我相信语法与on()
上面类似。
编辑(2012 年 8 月 29 日)
问题是我如何才能真正保护它,因为知道如何在其他浏览器上使用 Firebug 或相同工具的人可以轻松更改我的 Javascript 代码并重新创建问题
您可以保护您的脚本,但不能阻止任何人针对您的站点执行他们自己的自定义脚本。
为了至少在某种程度上保护您自己的脚本,您可以:
- 在外部 js 文件中编写任何脚本,并在您的站点中包含对该脚本的引用
- 缩小文件以供发布
在外部 js 文件中编写任何脚本,并在您的站点中包含对该脚本的引用
这将使您的 html 变得干净,并且不会留下任何脚本的痕迹。用户当然可以看到脚本参考并遵循它,您可以缩小文件以进行发布。
要包含对脚本文件的引用:
<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript" src="/scripts/myscript.min.js"></script>
缩小文件以供发布
缩小脚本文件将删除任何多余的空格并将函数名称缩短为字母等。类似于 JQuery 的缩小版。代码仍然有效,但毫无意义。当然,铁杆用户可能会遵循毫无意义的命名代码并最终弄清楚您在做什么。但是,除非您值得入侵,否则我怀疑任何人都会在普通网站上打扰。
就我个人而言,我没有经历过缩小过程,但这里有一些资源:
编辑(2012 年 9 月 1 日)
回应adeneo
关于使用one()的评论。我知道您已经通过取消绑定和重新绑定到提交事件找到了解决问题的方法。
我相信虽然值得one()
在此答案中提及完整性,因为将事件与one()绑定只会执行事件,然后再次解除绑定。
作为您的点击事件,当触发时,无论如何都会重新加载和重新绑定自身,one()
作为解除绑定和重新绑定的替代方案也是有意义的。
其语法类似于on()
,请牢记动态元素。
// Syntax should be right but not tested.
$(document).ready(function() {
$(document).one('click', '.delete_button', function() {
$(this).parent().postAjax(function(data) {
if (data.error == true) {} else {}
}, true);
});
});
相关资源
再次编辑!!!!:
jQuery.fn.postAjax = function(show_confirm, success_callback) {
this.off('submit').on('submit', function(e) { //this is the problem, binding the submit function multiple times
e.preventDefault();
if (show_confirm) {
if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
} else {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
});
return this;
};
$(document).ready(function() {
$(this).on('click', '.delete_button', function(e) {
$(e.target.form).postAjax(true, function(data) {
if (data.error) {
} else {
}
});
});
});