[英]jQuery click event fires twice
我正在开发一个内容覆盖脚本的问题。 似乎我的结束事件触发了两次,但第一次(或第二次,取决于你点击的开启链接)返回'undefined'。
你可以在JSFiddle上找到一个精简的工作示例: http : //jsfiddle.net/UhSLy/2/
如果单击1.单击然后再单击 2.单击它首先提示undefined ,然后单击 Dummy 。
当我删除一个开放链接时,一切正常。 但是我必须有多个链接,因为它们打开了不同的叠加层。
导致问题的原因是什么,我该如何避免?
编辑:来自JSFiddle的代码如下:
;(function ($, window, document, undefined) {
"use strict";
var pluginName = 'contentOverlay',
defaults = {
property: 'value'
};
function Plugin(element, options) {
this.element = element;
this.$element = $(element);
this.options = $.extend({}, defaults, options);
this.init();
}
Plugin.prototype = {
/**
* Init
*/
init: function () {
var self = this;
// Bind opening method
this.$element.click(function() {
self.open();
});
// Bind closing method
$('#close').click(function() {
self.close();
});
},
/**
* Open
*/
open: function () {
this.overlay = 'Dummy';
},
/**
* Close
*/
close: function () {
alert(this.overlay); // <==== PROBLEM: fires twice. returns 'undefined' once
},
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin(this, options));
}
});
}
$(function () {
$('.open').contentOverlay();
});
})(jQuery, window, document);
$('#close').click(function() {
self.close();
});
您将两个对象close()
方法绑定到close处理程序。 基本上,当您单击关闭按钮时,它会运行两个函数,每个函数对应一个覆盖对象。 因为一个覆盖对象不存在,所以它返回undefined
。
您可以通过以下方式解决此问题:
close: function () {
if(this.overlay != undefined){ // Skips over the undefined overlays
alert(this.overlay);
}
}
演示: http : //jsfiddle.net/UhSLy/9/
如果我建议你在这里查看: http : //jsfiddle.net/PgbfN/25/
我认为你的这个if
检查插件是否初始化是undefined
因此会运行两次。
要解决我添加的isApplied
标志,一旦应用将标志设置为true
。 休息希望演示将有助于:)
希望能帮助到你
$.fn[pluginName] = function(options) {
return this.each(function() {
alert('me ==> ' + (!$.data(this, 'plugin_' + pluginName)) + " ==== " + $.data(this, 'plugin_' + pluginName));
if (!isApplied) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
}
完整代码
var isApplied = false;
(function($, window, document, undefined) {
"use strict";
var pluginName = 'contentOverlay',
defaults = {
property: 'value'
};
function Plugin(element, options) {
this.element = element;
this.$element = $(element);
this.options = $.extend({}, defaults, options);
isApplied = true;
this.init();
}
Plugin.prototype = {
/**
* Init
*/
init: function() {
var self = this;
// Bind opening method
this.$element.click(function() {
self.open();
});
// Bind closing method
$(document).on('click', '#close', function() {
alert('Close is clicked');
//self.close(); //<<== Is called
});
},
/**
* Open
*/
open: function() {
this.overlay = 'Dummy';
},
/**
* Close
*/
close: function() {
alert(this.overlay); // <==== PROBLEM: fires twice. returns 'undefined' once
},
};
$.fn[pluginName] = function(options) {
return this.each(function() {
alert('me ==> ' + (!$.data(this, 'plugin_' + pluginName)) + " ==== " + $.data(this, 'plugin_' + pluginName));
if (!isApplied) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
}
$(function() {
$('.open').contentOverlay();
});
})(jQuery, window, document);
我想出了这个(只有这里的变化)
open: function () {
this.overlay = 'Dummy';
this.opened=true;
},
$('#close').click(function() {
if(self.opened)
{
self.opened=false;
self.close();
}
});
我认为代码解释了一切。 如果实例不存在,则close
事件永远不会触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.