Повторить текущую функцию после сбоя AJAX? - PullRequest
2 голосов
/ 28 мая 2011

У меня есть функция, которая связана с использованием live ():

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).attr("rel");
    $(this).die( "click" ).addClass("disabled");

    $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        

            var newData = JSON.parse( data );

            if ( newData.Message.code == 200 ) {    // success




            } else {                                // failure

                // rebind function here

            }

        }

    });     
});

Я использую .die (), чтобы отсоединить все живые события от элемента при первом щелчке, но что мне нужно сделатьперепривязать весь этот блок кода к этому элементу, ЕСЛИ ЗАПРОС AJAX ВОЗВРАЩАЕТ КОД ОШИБКИ (<200). </p>

Как мне это сделать?Мне по сути нужно восстановить привязки.

С уважением, Барри

Ответы [ 3 ]

1 голос
/ 28 мая 2011

РЕДАКТИРОВАТЬ Начиная с jQuery 1.7, рекомендуемый метод реагирования на события .on().


Только не снимайте привязки, пока не убедитесь, что они вам больше не понадобятся.

$('.wink-back').on("click", function( event ) {      // jQuery >= 1.7
// $('.wink-back').live("click", function( event ) { // jQuery <  1.7
    var $this = $(this);
    var uid = $this.attr("rel");

    if (!$this.hasClass("disabled")) {
      $this.addClass("disabled");

      $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        
            var newData = JSON.parse( data );

            if ( newData.Message.code == 200 ) { // success
                $this.off("click");     // jQuery >= 1.7
                // $this.die("click");  // jQuery <  1.7
            } else {
                $this.removeClass("disabled");
            }
        }
      });
    }     
});
0 голосов
/ 16 февраля 2012

используйте функцию ниже для предотвращения многократного запроса AJAX.

jQuery('a.' + selectedTab + '-list-page').die();

jQuery('a.' + selectedTab + '-list-page').live('click', function() {
0 голосов
/ 28 мая 2011

Кажется, ты умираешь преждевременно, так сказать.Разве не имеет смысла удалять привязки событий click, если вы уверены, что запрос Ajax действительно был успешным?

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).attr("rel");

    $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        


            $(this).die( "click" ).addClass("disabled");
            var newData = JSON.parse( data );



        }

    });     
});

Учитывая, что ваша проблема заключается в том, что вы хотите предотвратить несколько запросов Ajax посленажата ссылка, jQuery предоставляет несколько глобальных обработчиков событий Ajax, которые могут быть задействованы для любого действия Ajax.

Что касается вашей конкретной проблемы, вы хотите отключить нажатую ссылку при появлении новойЗапущен Ajax-запрос, и, если он успешен, удалите привязку события click для этого элемента.

Вот как вы это сделаете.

Сначала мы настроим два глобальных прослушивателя событийдля любого Ajax-запроса, чтобы мы могли отключить пользовательский интерфейс до завершения действия;один для того, когда начинается запрос Ajax, другой для того, когда он закончен:

$('#my-Element-Containing-All-WinkBack-Class-Elements').ajaxStart(function() {
  // Show an overlay over the whole page or
  // over your element containing your links with
  // opacity 0 so that any elements cannot be clicked.
}).ajaxStop(function() {
  // Remove the overlay
});

Итак, что мы делаем здесь, слушаем любой запрос на запуск.Как только мы начинаем, мы предотвращаем любые дальнейшие клики на странице (или другой области страницы - по мере необходимости), добавляя прозрачное наложение с использованием CSS по следующим строкам:

.page-overlay {
    z-index: 10000;
    filter: alpha(opacity=0); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE */
    -khtml-opacity: 0;   /*older Safari*/
    opacity: 0;   /*supported by current Mozilla, Safari, and Opera*/
    position: absolute; top:0; left:0; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

Ваша страница будет повторно активирована один раззапрос завершается удалением этого наложения в методе .ajaxStop ().

Ваша фактическая привязка события щелчка обрабатывается, как я уже предлагал.

...