Проблема с манипулированием DOM (blockUI или alert ()) во время запроса onchange - предотвращает запуск другого события - PullRequest
Новая
       26

Проблема с манипулированием DOM (blockUI или alert ()) во время запроса onchange - предотвращает запуск другого события

1 голос
/ 06 мая 2010

РЕДАКТИРОВАТЬ: Я ошибочно предположил, что это было вызвано blockUI (); Я использовал Fire.bug console.log для регистрации сообщения, но для примера здесь я изменил на предупреждение, чтобы вам не понадобился firebug для репликации. После того, как я снова проверил его, я смог удалить blockUI, и онклик не выстрелил и не выстрелил. Похоже, проблема заключается в том, что DOM меняется или когда появляется обратная связь, если он останавливает запуск по клику.

У меня проблемы с jQuery blockUI plugins и запускаются два события, которые (я думаю, если я не теряю их) не связаны.

В основном у меня есть текстовые поля с привязанными событиями onchange. Событие отвечает за блокировку пользовательского интерфейса, выполнение вызова ajax и, в случае успеха, разблокирование пользовательского интерфейса. Аякс сохраняет текст в памяти. Другой элемент управления - это кнопка с событием onclick, которое также блокирует пользовательский интерфейс, запускает ajax-запрос, сохраняя то, что находится в памяти, в базу данных, и в случае успеха разблокирует пользовательский интерфейс.

Оба из них прекрасно работают отдельно. Проблема возникает, когда я запускаю обмен, нажимая на кнопку. Затем запускается только onchange, а onclick игнорируется.

Я могу изменить текст в флажке, щелкнуть ссылку, и если присутствует jQuery.blockUI () (или предупреждение), только onchange срабатывает и сохранение никогда не вызывается. Если я удалю blockUI (или предупреждение), обе функции будут вызваны.

Вот полностью рабочий пример, где вы можете увидеть проблему. Обратите внимание, что setTimeout присутствует, когда я пытался смоделировать задержку ajax, но проблема возникает без него.

Чтобы скопировать, введите что-нибудь в текстовое поле и нажмите «Сохранить». Оба события должны быть запущены, но срабатывает только onchange. 

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            //$.blockUI();
            alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

    </script>
</head>

<body>
    <input id="textbox" type="text" onchange="doSomething();">
    <a id="link" href="#"onclick="save()">save</a>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 06 мая 2010

Следующее «исправлено» с использованием onfocus для ссылки, и событие инициируется. С помощью onclick это не так.

Работа: 

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onfocus="save()">save</a>
</body>
</html>

Это не так, единственное отличие - это щелчок, который не срабатывает, когда он предшествует ему. 

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script>
        function doSomething(){
            alert("blocking UI");
            console.log("do something");
            //alert("doing something");
            //setTimeout(function(){
                //$.unblockUI();
            //},500);
        }

        function save(){
            //$.blockUI();
            console.log("saving");
            //setTimeout(function(){
            //$.unblockUI();
            //}, 1000);
        }

        function cachebtn()
        {
            console.log("cache bouton");
        }
    </script>
</head>

<body>
    <input id="textbox1" type="text" onchange="doSomething();">
    <input id="textbox2" type="text" onchange="doSomething();">
    <a id="link" href="#" onclick="save()">save</a>
</body>
</html>
0 голосов
/ 06 мая 2010

В любой момент времени в среде одной страницы будет только один цикл обработки событий. Если ваши ajax-вызовы являются синхронными, то пока обрабатывается одно событие, это все, что будет происходить. Если бы браузер запустил еще один цикл обработки событий, то он не был бы однопоточным. Но так оно и есть.

...