jQuery click event fires twice
<p>I have a problem with a content overlay script I am developing.
It seems that my closing event fires twice, but returns 'undefined' the first time (or second time, depending on which opening link you click).</p>

<p>You can find a stripped-down working example on JSFiddle: <a href="http://jsfiddle.net/UhSLy/2/" rel="nofollow">http://jsfiddle.net/UhSLy/2/</a></p>

<p>If you click on <em>1. Click</em> and then on <em>2. Click</em> it alerts <em>undefined</em> first, then <em>Dummy</em>.</p>

<p>When I delete one opening-link, everything works fine. But I have to have multiple links since they open different overlays.</p>

<p>What causes the problem and how can I avoid it?</p>

<p>Edit: Code from JSFiddle follows:</p>

<pre><code>;(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); // &lt;==== 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);
</code></pre>

<p>​</p>
