0

入力テキストボックスとボタンの2つの要素があるページがあります

これで、テキストボックスにblurイベントハンドラーがあります。これは、最初にjquery uiモーダルウィンドウを表示し、次にajaxリクエストを作成します。リクエストが完了すると、ダイアログを閉じます。また、ボタンにクリックイベントハンドラーがあります（これもsthを実行します）。

テキストボックスに何かを入力してボタンを直接クリックすると、blurとclickイベントハンドラーの両方が発生しますが、blurのみが発生し、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/

4

1 に答える 1

0

了解しました。ついにこの問題の回避策を見つけました。最初にjqueryモーダルダイアログウィジェットのソースを確認しました。ある場所ですべてのイベントが無効になっているため、おそらくそれが原因でした。今やった回避策は次のとおりです。

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

        });

基本的に私は100msの遅延を導入しました、そしてこの時までにコントロールはクリックハンドラーに到達することができ、それでそれが呼び出されるでしょう、これが役立つことを願っています。

于 2013-01-08T05:10:44.527 に答える