Функция jQuery не запущена [дубликат]

Прежде чем вы сможете безопасно использовать jQuery, вам нужно убедиться, что страница находится в состоянии, когда оно готово к манипулированию. С помощью jQuery мы выполняем это, помещая наш код в функцию, а затем передавая эту функцию в $(document).ready() . Функция, которую мы передаем, может быть просто анонимной функцией .

$(document).ready(function() {  
    console.log('ready!');  
});

Это запустит функцию, которую мы передаем .ready (), как только документ будет готов. Что тут происходит? Мы используем $ (document) для создания объекта jQuery из документа нашей страницы, а затем вызываем функцию .ready () для этого объекта, передавая ему функцию, которую мы хотим выполнить.

Поскольку это что-то, что вы сами будете делать много, для этого есть сокращенный метод, если вы предпочитаете - функция $ () выполняет двойную функцию как псевдоним для $ (document) .ready (), если вы передадите ей функцию:

$(function() {  
    console.log('ready!');  
});  

Это хорошее чтение: Основы JQuery

.ready () - задает функцию, выполняемую при полной загрузке DOM.

$(document).ready(function() {
  // Handler for .ready() called.
});

Вот список из всех методов jQuery

Чтение на Представление $ (document) .ready ()

Чтобы быть реалистичным, document.ready не требуется ни для чего другого, кроме как правильно манипулировать DOM, и это не всегда необходимо или лучший вариант. Я имею в виду, что когда вы разрабатываете большой плагин jQuery, например, вы вряд ли используете его во всем коде, потому что вы пытаетесь сохранить его DRY, поэтому вы максимально абстрактны в методах, которые управляют DOM, но предназначены для вызова позже. Когда весь ваш код плотно интегрирован, единственный метод, открытый в document.ready, обычно init, где происходит вся магия DOM. Надеюсь, это ответит на ваш вопрос.

Ответы:

Метод jQuery .on (): Я довольно часто использую метод .on () для AJAX (динамически создавая элементы DOM). Если обработчики кликов .on () всегда находятся внутри document.ready?

Нет, не всегда. Если вы загрузите JS в головке документа, вам понадобится. Если вы создаете элементы после загрузки страницы через AJAX, вам нужно будет. Вам не нужно, если скрипт находится под элементом html, который вы добавляете обработчиком.

Производительность. Является ли более эффективным поддерживать различные объекты javascript / jQuery внутри или снаружи document.ready ( также, разница в производительности значительна?)?

Это зависит. Для прикрепления обработчиков потребуется столько же времени, это просто зависит, хотите ли вы, чтобы это произошло сразу после загрузки страницы, или если вы хотите, чтобы он дождался загрузки всего документа. Таким образом, это будет зависеть от того, что вы делаете на странице.

Область объекта: страницы, загруженные AJAX, не могут получить доступ к объектам, находящимся внутри документа предыдущей страницы.

Это, по сути, его собственная функция, поэтому он может получить доступ только к vars, объявленным в глобальной области (за пределами / выше всех функций) или с помощью window.myvarname = '';

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

Но вы должны создавать функции для всех действий и вызывать их из документа document.ready. Когда вы создаете функции (ваши глобальные объекты), назовите их, когда захотите. Таким образом, как только ваши новые данные будут загружены и будут созданы новые элементы, снова вызовите эти функции.

Эти функции связаны с событиями и элементами действия.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

Я добавил ссылку на div и хотел сделать некоторые задачи при нажатии. Я добавил код под добавленным элементом в DOM, но он не работал. Вот код:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

Это не сработало. Затем я поместил код jQuery внутри $ (document) .ready и работал отлично. Вот оно.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

Он готов к событию, когда DOM (объектная модель документа) загружена.

Поскольку это событие происходит после того, как документ готов, это хорошее место для всех других событий и функций jQuery. Как и в примере выше.

Метод ready () указывает, что происходит, когда происходит событие готовности.

Совет. Метод ready () не должен использоваться вместе с.