javascript - jQuery 单击事件触发两次

我正在开发的内容覆盖脚本有问题。
似乎我的关闭事件触发了两次，但第一次(或第二次，取决于您单击的打开链接)返回“未定义”。

您可以在 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() 方法绑定(bind)到关闭处理程序。基本上，当您单击关闭按钮时，它会运行两个功能，每个覆盖对象一个。因为一个覆盖对象不存在，它返回 undefined 。

您可以通过以下方式解决此问题:

close: function () {
    if(this.overlay != undefined){ // Skips over the undefined overlays
        alert(this.overlay);
    }
}

演示: http://jsfiddle.net/UhSLy/9/

关于javascript - jQuery 单击事件触发两次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11404674/