jQuery ui modal对话框阻塞点击事件 [英] jQuery ui modal Dialog blocking click event

问题描述

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

I have a page where i have two elements, an input textbox and a button

现在我有一个模糊事件处理程序的文本框，首先显示一个jquery ui模态窗口，然后发出ajax请求，一旦请求完成，我关闭对话框。我也有一个点击事件处理程序的按钮（这也是sth）。

Now i have a blur event handler on the textbox, which first shows a jquery ui modal window and then makes an ajax request, once request is done, i am closing the dialog. Also i have a click event handler on the button(which also does sth).

现在当我在文本框中键入的东西，并直接点击按钮，模糊和点击事件处理程序应该触发，但它只触发模糊，点击事件被阻止，因为jquery ui模式对话框（当我删除对话框，两个事件都被触发）

Now when i type something in the textbox and directly click the button, both blur and click event handlers should fire, but it only fires blur and the click event is getting blocked because of jquery ui modal dialog(when i remove the dialog, both events are getting fired)

这里是示例代码

    // 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/

Here's the JS fiddle for the same - http://jsfiddle.net/vjunloc/2Lw7S/7/

推荐答案

Alrighty，所以我终于找到了这个问题的解决方法，首先我检查了jquery模态对话框窗口部件的源，并在一个地方，他们禁用所有的事件，所以也许这是罪魁祸首，现在的解决方法我已经做了

Alrighty, so i finally found a workaround for this problem, firstly i checked the jquery modal dialog widget's source, and at one place they are disabling all the events , so perhaps that was the culprit, now the workaround which i have done is

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

        });

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

so basically i introduced a delay of 100ms, and by this time the control would be able to reach the click handler and thus it will get invoked, hope this helps.

这篇关于jQuery ui modal对话框阻塞点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！