jQuery ui modal Dialog阻塞点击事件答案

【问题标题】：jQuery ui modal Dialog blocking click eventjQuery ui modal Dialog阻塞点击事件
【发布时间】：2012-10-20 06:44:28
【问题描述】：

我有一个页面，其中有两个元素，一个输入文本框和一个按钮

现在我在文本框上有一个模糊事件处理程序，它首先显示一个 jquery ui 模式窗口，然后发出一个 ajax 请求，一旦请求完成，我将关闭对话框。另外我在按钮上有一个点击事件处理程序（它也做某事）。

现在，当我在文本框中键入内容并直接单击按钮时，模糊和单击事件处理程序都应该触发，但它只会触发模糊，并且由于 jquery ui 模态对话框（当我删除对话框时）单击事件被阻止，这两个事件都被触发了）

这是示例代码

    // the topic/subscription hash
var pubsub_cache = {};

$.publish = function(/* String */topic, /* Array? */args){
    // summary:
    //        Publish some data on a named topic.
    // topic: String
    //        The channel to publish on
    // args: Array?
    //        The data to publish. Each array item is converted into an ordered
    //        arguments on the subscribed functions.
    //
    // example:
    //        Publish stuff on '/some/topic'. Anything subscribed will be called
    //        with a function signature like: function(a,b,c){ ... }
    //
    //    |        $.publish("/some/topic", ["a","b","c"]);
    pubsub_cache[topic] && $.each(pubsub_cache[topic], function(){
        this.apply($, args || []);
    });
};

$.subscribe = function(/* String */topic, /* Function */callback){
    // summary:
    //        Register a callback on a named topic.
    // topic: String
    //        The channel to subscribe to
    // callback: Function
    //        The handler event. Anytime something is $.publish'ed on a
    //        subscribed channel, the callback will be called with the
    //        published array as ordered arguments.
    //
    // returns: Array
    //        A handle which can be used to unsubscribe this particular subscription.
    //    
    // example:
    //    |    $.subscribe("/some/topic", function(a, b, c){ /* handle data */ });
    //
    if(!pubsub_cache[topic]){
        pubsub_cache[topic] = [];
    }
    pubsub_cache[topic].push(callback);
    return [topic, callback]; // Array
};

$.unsubscribe = function(/* Array */handle){
    // summary:
    //        Disconnect a subscribed function for a topic.
    // handle: Array
    //        The return value from a $.subscribe call.
    // example:
    //    |    var handle = $.subscribe("/something", function(){});
    //    |    $.unsubscribe(handle);

    var t = handle[0];
    pubsub_cache[t] && $.each(pubsub_cache[t], function(idx){
        if(this == handle[1]){
            pubsub_cache[t].splice(idx, 1);
        }
    });
};

var $loaderDialog = $('<div>The dummy dialog</div>')
                                .dialog({
                                    autoOpen:false,
                                    modal:true
                                });

            $('.validate').on('change', function(){
                $loaderDialog.dialog('open');
                setTimeout(function(){
                    $.publish('validation-done');

                },3000)
            });

            $.subscribe('validation-done', function(){
                $loaderDialog.dialog('close');
                console.log('validation done');
            });

            $('#btn').on('click', function(){

                    alert('clicked');
            });

这是相同的 JS 小提琴 - http://jsfiddle.net/vjunloc/2Lw7S/7/

【问题讨论】：

标签： jquery-ui dialog click blocking

【解决方案1】：

好吧，所以我终于找到了解决这个问题的方法，首先我检查了 jquery 模态对话框小部件的源代码，并且在一个地方他们禁用了所有事件，所以也许这就是罪魁祸首，现在我已经完成了解决方法是

$('.validate').on('change', function(){
            setTimeout(function(){
                   $loaderDialog.dialog('open');
                   setTimeout(function(){
                     $.publish('validation-done');
                 },3000)
            }, 100);

        });

所以基本上我引入了 100 毫秒的延迟，此时控件将能够到达点击处理程序，因此它将被调用，希望这会有所帮助。

【讨论】：