Question

我创建了一个自定义灯箱插件，我需要在异步完成操作时创建自定义事件/侦听器。我的目的是在关闭灯箱或者转到next / prev项目时销毁/取消设置视频/ iframe源以防止错误（特别是在IE上）。

例如我创建了这个脚本：

$.Lightbox = function() {

    var el;

    function init() {
        /*** do some stuff ***/
        getMedia(el);
    }

    function getMedia(el) {
        media_type = 'video';
        switch(media_type) {
            case 'image':
                /*** do some stuff ***/
                load_image();
                break;
            case 'video':
                /*** do some stuff ***/
                load_video();
                break;
        }
    }

    function load_video() {
        el.on('removeVideo',function() {
            /*** do some stuff ***/
        });
    }

    function load_image() {
        el.on('removeVideo',function() {
            /*** do some stuff ***/
        });
    }

    /*** need to be an event that I can trigger and detect when it's finish ***/
    function removeVideo() {
        /*** just for the example ***/
        if ($('iframe').length > 0) {
            $('iframe').attr('src','').load(function(){
                $('iframe').remove();
            });
        } else {
            $('img').remove();
        }
    }

    $(document).on('click touchend',next_prev, function() {
        el.on('removeVideo',function() {
            getMedia();
        });
        return false;
    });

    $(document).on('click touchend',close, function() {
        el.on('removeVideo',function() {
            /*** do some stuff ***/
        });
        return false;
    });

    init();

};

在插件中创建自定义事件侦听器的正确方法是什么。我不知道如何处理这个问题以及创建它的正确方法。

Answer 1

参见.bind（）和.trigger（）方法：

http://api.jquery.com/bind/

http://api.jquery.com/trigger/

el.bind("removeVideo", function() {
  // what to do when removeVideo is triggered
});

然后你可以触发事件：

el.trigger("removeVideo");

编辑：

removeVideo完成后执行代码

解决方案1：

function removeVideo() {
    ...
    el.trigger("removeVideoComplete");
}

el.bind("removeVideoComplete", function() {
    // What you want
});

解决方案2：

function removeVideo() {
    ...
    // simply do what you want ! Maybe call a function ? 
}

解决方案3：

function removeVideo(callback) {
    ...
    callback(el);
}

...
var callback = function(el) {
    // what you want
}
removeVideo(callback);

jQuery - 自定义事件完成

1 个答案: