Функция убийства в AJAX-запрашиваемом контенте - PullRequest
Новая
       12

Функция убийства в AJAX-запрашиваемом контенте

0 голосов
/ 06 декабря 2011

У меня есть слайдер, который вызывается с помощью AJAX-модала. Это работает потрясающе, но если я закрою модальное и открою другой модальный с тем же ползунком, очевидно, что первая функция не была убита, потому что она скользит с неправильными интервалами. После того, как я открываю и закрываю несколько модалей, ползунок неуправляемо скользит, как будто событие из предыдущих вызовов все еще активно, и говорит ползунку скользить. Мне нужно убить слайдер, когда я закрываю оверлей, чтобы он не был «активным» при повторном вызове.

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

Функция для вызова AJAX 

$(".locationResultLink").click(function () {
  // The overlay is faded in,
  // and then the AJAX-content is loaded into it      

  // Variable url is pulled from a property on (this) 
  // + ID of box on AJAX-requested page

  $("#overlayInner").load(url, function () {
     // When load is successful, call the slider             
     $(this, '#ajaxSlider').Horinaja({
        capture: 'ajaxSlider', delay: 0.3,
        duration: 4, pagination: true
     });
  });

Функция закрытия AJAX 

// The close button is actually on the AJAX-page, so we use on()    
$("body").on("click", "#btnOverlayClose", function () {
   // The overlay is faded out, and then ...
   $("#ajaxSlider").die();
});

1 Ответ

0 голосов
/ 06 декабря 2011

Самый простой способ сделать это будет; 

$(".locationResultLink").click(function () {
  var self = $(this);
  var dataKey = 'click-id';
  var clickId = (self.data(dataKey) || 0) + 1;

  self.data(dataKey, clickId);

  // The overlay is faded in,
  // and then the AJAX-content is loaded into it      

  // Variable url is pulled from a property on (this) 
  // + ID of box on AJAX-requested page

  $("#overlayInner").load(url, function () {
     if (self.data(dataKey) == clickId) {
       // When load is successful, call the slider             
       $(this, '#ajaxSlider').Horinaja({
          capture: 'ajaxSlider', delay: 0.3,
          duration: 4, pagination: true
       });
     }
  });

Или даже; 

(function () {

  var counter = 0;    

  $(".locationResultLink").click(function () {
    var id = ++counter;

    // The overlay is faded in,
    // and then the AJAX-content is loaded into it      

    // Variable url is pulled from a property on (this) 
    // + ID of box on AJAX-requested page

    $("#overlayInner").load(url, function () {
       if (counter == id) {
         // When load is successful, call the slider             
         $(this, '#ajaxSlider').Horinaja({
            capture: 'ajaxSlider', delay: 0.3,
            duration: 4, pagination: true
         });
       }
    });
  });

}());

То, что мы здесь делаем, это увеличиваем счетчик каждый раз и проверяем обратный вызов, что счетчик не был увеличен; если нет, мы инициализируем ползунок, а если нет -

Другой подход заключается в использовании метода abort() для jqXHR объекта , однако вы должны использовать другой метод ajax от до load() в качестве нагрузки не дает доступа к объекту jqXHR.

...