Such a problem - I use on the site barba js - a type script to implement transitions between pages using ajax.

The problem is, after the content is loaded by the Ajax, the scripts that are added to the head do not work. I do not understand how to make everything work. I tried using .on('click') to launch manual functions, which seems crazy, but it doesn’t work, scripts can be cut if you do setTimout inside the on click setTimout , that is, click on the link, after a second the function is started, then everything is OK, but this nonsense, firstly a delay, secondly all functions manually started - this is tin.

When I manually made Ajax transitions, without plug-ins, I started all the functions manually in the Sacks section, but I also believe that this is a crutch. Why is it not possible to globally declare all third-party scripts so that they work when the Ajax content changes? How do sites on Ajax, do they call for a new function every time?

The whole Internet was climbing - everyone advises deferred hanging of events - on, but then what should be the event (what event after the Ajax call)? If on click, then described above that only works with a timeout.

    2 answers 2

    Need live-binding. Example:

     $(document, window) .off("click", ".target") .on("click", ".target", function(e) { // TODO }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    • Thanks for the answer! It turns out that you need to manually reinitialize everything? - DexColt
    • Declare a function inside jQuery. And just through the replacement, replace all .on with .liveBind, for example. $ .fn.liveBind = function ... I think will understand further. :) - SlyDeath
    • Thanks for the help! - DexColt

    JS event language. The scripts in the <head> are run before the content appears. The working version will be with a wrapper function. For example:

     <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function headInit(){ // Здесь твой код // различные обработчики и т.п. console.log('Скрипты в head'); } </script> </head> <body> <header> <a href="#" id="load-content">Загрузить контент</a> </header> <div id="ajax-content"></div> <script> (function($){ // Обработчик клика по ссылке загрузки // можно любое событие // хоть $(window).load() $(document).on('click','#load-content',function(){ // параметры запроса var postData = { action: 'ajax_load', param1: '' // любые параметры }; // Обработчик успешного выполнения запроса var successFunc = function(response){ // Если сервер выдает сразу разметку // вставим разметку в блок $('#ajax-content').html(response); // и после этого запустим функцию-обертку из head headInit(); }; // собственно сам запрос $.ajax({ url: '/', method: 'POST', data: postData, success: successFunc }); return false; }); })(jQuery); </script> </body> </html>

    Correctly hang event handlers, not

     `$('.link').click(callbackFunc)`

    , but

     `$(document).on('click', '.link', callbackFunc)`
    • Thanks for the answer. But $ (document) .on ('click', '.link', callbackFunc) behaves strangely, it kind of performs the function at the time of the click, and only then the new content is loaded, I described above, if you set a timeout, the content has time to load and it works. - DexColt
    • Show me an example code, it's easier to understand the problem. In general, it is better to put all the scripts in front of </body> - Maxim K