Super Simple Slider не работает после загрузки AJAX

Question

Я пытаюсь запустить готовое событие после того, как пользователь нажимает на #mail-wrap, который загружается на другой странице с помощью AJAX, так что может быть отказано sss(). Однако это не повторение. Что я делаю не так?

jQuery(document).ready(function($) { 

    function sss() { 
     $(document).trigger('ready'); 
     $('.slider').sss({ 
      speed: 5000 
     }); 
    } 

    // User event 
    $('#mail-wrap').on('click', function(e) { 
     e.preventDefault(); 

     sss(); 
    }); 

    $('.slider').sss({ 
     speed: 5000 
    }); 

}); 

Полный соответствующий код (код окружен document ready и функция sss() находится вне его):

(function($) { 

    var contactButton = $('#contact-button'); 

    // Load the Contact page 
    function loadContact() { 
     $('#content').fadeOut(50, function() { 
      $('<span class="loading-icon page-loading-icon"></span>').insertBefore('#content'); 
     }).load(site.url + '/contact/ #contact-keebs', function() { 
      $('.page-loading-icon').remove(); 
      $(this).fadeIn(50); 
      $('body').addClass('contact'); 
      $('#projects-list').removeClass('fadeInUp'); 
      $('#contact-info, #clients').addClass('fadeInUp'); 
     }); 

     // Change the Contact button to 'Projects' 
     $(contactButton).removeClass('contact-button').addClass('project-button').attr('data-title', 'Projects').css('width', '71px').text('Projects').shuffleLetters(); 
     myIcons.to('work'); 

     // Change the title of the document 
     $('head').find('title').text('Contact | Keebs'); 

     //Reinitialize SSS 
     sssInit(); 
    } 

    // Load the Projects page 
    function loadProjects() { 
     $('#content').fadeOut(50, function() { 
      $('<span class="loading-icon page-loading-icon"></span>').insertBefore('#content'); 
     }).load(site.url + '/ #primary', function() { 
      $('.page-loading-icon').remove(); 
      $(this).fadeIn(50); 
      $('body').removeClass('contact'); 
      $('#contact-info, #clients').removeClass('fadeInUp'); 
      $('#projects-list').addClass('fadeInUp'); 
      TweenLite.to("body.single #project-wrapper", 0.3, {height:0, force3D:true, ease:Power4.easeOut}); 
     }); 

     // Change the Projects button to 'Contact' 
     $(contactButton).removeClass('project-button').addClass('contact-button').attr('data-title', 'Get in touch').css('width', '96px').text('Get in touch').shuffleLetters(); 
     myIcons.to('mail'); 

     // Change the title of the document 
     $('head').find('title').text(site.title); 
    } 

    // User event 
    $('#mail-wrap').on('click', function(e) { 
     e.preventDefault(); 

     // Prevent accidental double clicks 
     if (!$(this).data('isClicked')) { 
      var link = $(this); 

      if (!contactButton.hasClass('project-button')) { 
       var data1 = { contact_page: site.url + '/contact/ #contact-keebs' }; 
       History.pushState(data1, 'Contact | Keebs', site.url + '/contact/'); 
       loadContact(); 

      } else { 
       var data2 = { home_page_contact: site.url + '/ #primary' }; 
       History.pushState(data2, site.title, site.url + '/'); 
       loadProjects(); 

      } 

      link.data('isClicked', true); 
      setTimeout(function() { 
       link.removeData('isClicked'); 
      }, 500); 
     } 

    }); 

})(jQuery); 

Answer 1

Это не ясно, что делает ваше событие Ajax, и если вы используете sss() связанный с JQuery определение объекта ng ваша собственная функция sss сбивает с толку. Вы действительно хотели сделать что-то подобное;

function sssInit() { 
    jQuery('.slider').sss({ 
     speed: 5000 
    }); 
} 

jQuery(document).ready(function($) { 

    sssInit(); 

    // User event 
    $('#mail-wrap').on('click', function(e) { 
     e.preventDefault(); 
     sssInit(); 
    }); 
}); 

EDIT: Вы используете .load(), чтобы ваш sssInit вызов нужно будет идти в параметре функции complete например;

$('#content').fadeOut(50, function() { 
     $('<span class="loading-icon page-loading-icon"> </span>').insertBefore('#content'); 
    }).load(site.url + '/contact/ #contact-keebs', function() { 
     $('.page-loading-icon').remove(); 
     $(this).fadeIn(50); 
     $('body').addClass('contact'); 
     $('#projects-list').removeClass('fadeInUp'); 
     $('#contact-info, #clients').addClass('fadeInUp'); 
     sssInit(); 
    }); 

ВОПРОС: В Super Simple Slider крюках вверх это событие, используя $(window).load(function() { ... }) добавление элементов в DOM после нагрузки не получат обработчик событий и предотвращает слайдер работу.

Answer 2

пытается вызвать готовое событие после того, как пользователь нажимает на # почтовой обертке , который загружается на другой странице с помощью AJAX, чтобы sss() можно было обновить.

Однако, это не перезагрузка. Что я делаю не так?

.ready() уже звонил, когда $(document).trigger('ready'); называется?

Попробуйте с использованием $.holdReady()

// do stuff before `.ready()` event called 
$.holdReady(true); 
// User event 
$('#mail-wrap').on('click', function(e) { 
    e.preventDefault(); 
    sss(); 
    // call `.ready()` event by setting `$.holdReady()` to `false` 
    $.holdReady(false); 
}); 

function sss() { 
    jQuery('.slider').sss({ 
     speed: 5000 
    }); 
} 

jQuery(document).ready(sss); 

---

например,

$.holdReady(true); 
 
// User event 
 
$('#mail-wrap').on('click', function(e) { 
 
    e.preventDefault(); 
 
    sss("$.holdReady(true) within `click` event", this); 
 
    $.holdReady(false); 
 
}); 
 

 
function sss() { 
 
    console.log(arguments[1]); // `#mail-wrap` , `document` 
 
    $("body").append("<br>" + arguments[0] + " " + $.now()) 
 
} 
 

 
jQuery(document).ready(function($) { 
 
    sss("$.holdReady(false) within $(document).ready()", this) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="mail-wrap">click</div>