Question

我遇到了Jquery事件的问题。在用另一个元素替换该元素但同一类型和相同的id之后，Jquery事件被多次调用。

// 1. ajax call success and replace my block
// 2. This is my event that I want it happen. 

$(document).on("click", ".polaroid button.addImage", function(event) {
    event.preventDefault();
    // trigger browse file to upload
    $(event.target).closest("div.polaroid").find("input[type=file]").trigger("click");
});

此代码用于转售事件，在AJAX成功后调用。那么，为什么button.addImage在调用AJAX的同时多次调用事件click？这是html：

<div class="col-md-3 polaroid">
	<img src="images/ingredient/default_img.png" title="Main image" />
	<input type="file" name="file-image" style="display:none"/>
	<button type="button" data-toggle="tooltip" title="Add" class="btn addImage"><i class="glyphicon glyphicon-plus icon-plus"></i></button>
</div>

Answer 1

使用一个（）

$(document).one("click", ".polaroid button.addImage", function(event) {

Answer 2

您很可能再次加载此脚本或调用再次添加此事件处理程序的函数

最好的解决方法是找到再次调用此事件处理程序的位置。

解决方法是命名事件并始终在再次添加之前使用off()删除事件处理程序

$(document)
   .off('click.polaroid')
   .on("click.polaroid", ".polaroid button.addImage", function(event) {
       // other code
   });

Answer 3

感谢。我找到了答案。这是在“开启”之前使用“关闭”，如下所示：我更新了Mr.charlietfl的答案。

$(document)
   .off('click',".polaroid button.addImage")
   .on("click", ".polaroid button.addImage", function(event) {
       event.PreventDefault();
       // other code
   });

ajax替换元素后多次调用事件

3 个答案: