javascript - jQuery插件，只绑定(bind)一次事件

Question

我正在构建一个灯箱 jQuery 插件，但遇到了一个问题，即事件触发的频率与我在同一页面上有灯箱的频率一样。也许您知道如何防止这种情况发生。这是示例代码。

;( function( $, window, document, undefined ){
'use strict';

$.fn.myPlugin = function( options ){

    // here are some functions for click and touching   
    $(document).on('click', '.elem', function(e){
        e.preventDefault();
        console.log('click');
    });

    $( document ).on( 'touchstart','.elem', function(e){
        console.log('touch');
    });

    return this;
};
})( jQuery, window, document );

因此，如果我现在像我想使用的那样频繁地调用我的插件:

$('.elem1').myPlugin();
...
$('.elem4').myPlugin();

当我调用插件时，点击或触摸 console.log 就会触发。您对如何修复它有什么建议吗？

这是当前正在运行的插件，一页上有 4 个画廊。 http://andreknieriem.de/simple-lightbox-dev/

Answer 1

您的 onClick 为类为 .elem 的每个元素调用该函数。另外，当您执行 $(document).on('click'... 时，您正在监听页面上任意位置的点击。我猜这不是您想要的行为？你的意思是 $(this).on('click' ...?

尝试如下:

$.fn.myPlugin = function( options ){
    var target = this;

    // here are some functions for click and touching   
    $(document).on('click', target, function(e){
        e.preventDefault();
        console.log('click');
    });

    ...