jQuery ui modal Dialog blocking click event - jquery-ui

Question

I have a page where i have two elements, an input textbox and a button
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).
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)
Here's the sample code
// 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');
});
Here's the JS fiddle for the same - http://jsfiddle.net/vjunloc/2Lw7S/7/

Answer 1

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);
});
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.