JQuery событие работает только когда весь DOM загружен

-1

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

$("#div1").on('click',function(){ /* Stuff one*/ }); //#div 1 must exist 
$(".div2").on('click',function(){ /* Stuff two */}); //all objects with div 2 class must exist

Следующий код работает, хотя весь DOM является слишком большим (это SPA web) и требует, чтобы подождать некоторое время:

$(function(){ 
    $("#div1").on('click',function(){ /* Stuff one*/ }); //#div 1 must exist 
    $(".div2").on('click',function(){ /* Stuff two */}); //all objects with div 2 class must exist 
});

Я хочу попробовать этот код, но the event .load() is deprecated from jQuery 1.8:

$("#div1").on('load',function(){ 
    $(this).bind('click',function(){ /* Stuff one*/ }); //#div 1 must exist 
} 
$("#div2").on('load',function(){ 
    $(this).bind('click',function(){ /* Stuff two*/ }); //all objects with div 2 class must exist 
}

Кто-нибудь знает, как спровоцировать такой же эффект, используя не устаревший код, пожалуйста? :)

источник

2013-04-01 fcortes

Что делать, если вы используете делегирование не является обязательным? '$ (document) .on ('click', '.div2', ...)'? – zerkms

вы можете пойти в старую школу и включить javascript после всего содержимого прямо перед тегом закрывающего тела или сразу после того, как элемент, который вам нужно загрузить –

'.ready()' вызывается ** после ** '.load() '(когда все изображения DOM были полностью отображены). Я хочу как можно раньше загрузить эти события. – fcortes

Вы всегда можете начать поиск и вставить свой элемент script после каждой части DOM, которую хотите загрузить. Если элемент script расположен после того, как вы вскоре будете манипулировать DOM, вы можете быть уверены, что все DOM до тех пор, пока эта точка страницы уже не построена и не работает.

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

После нашего разговора в комментариях, ваш код может выглядеть, что:

<body> 
    <!-- HTML to be manipulated --> 
    <script> 
     require(['my-script'], function(myScript) { 
      myScript.init(); // initialize DOM manipulation and attach event handlers 
     }); 
    </script> 
    <!-- More HTML --> 
</body>

мои-script.js:

define(function(require, exports, module) { 
    // Your code.. 
    exports.init = function() { 
     // Initialize DOM 
    }; 
    // Your code.. 
});

источник

2013-04-01 23:08:47 iMoses

В моем случае это абсолютно невозможно. Я использую requireJS для модуляции моего кода, поэтому _I не должен создавать скрипты вне конфигурации requireJS. – fcortes

Не можете ли вы использовать 'require (['script-name'], function() {...});'? – iMoses

Но ... Как я могу сказать, что requireJS «Jep, My Dom Elements были загружены, вы можете установить эти события только сейчас?» – fcortes

JQuery событие работает только когда весь DOM загружен

ответ

Смежные вопросы