JavaScript не работает с внешним файлом

Question

Когда я использую этот код внутри моего HTML-документа, он работает:

$('a.tocenter[href*=#]').click( function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({ scrollTop: targetOffset - ( $(window).height() - $target.outerHeight(true) ) / 2 }, 1000);
    return false;}
    }
});

Если я попытаюсь поместить этот код во внешний файл JavaScript, а затем связать его с:

<script src="js/main.js"></script>

Это не работает, чтобы позволить этому работать, я должен был обернуть это внутри:

$( window ).load(function() {
    ...
});

Если я делаю это, это работает.

Я новичок в JavaScript/jQuery, это нормально или я что-то не так делаю? Почему так себя ведет? Это хорошая практика, чтобы сделать это?

Единственная цель иметь его во внешнем файле - сохранить код чистым и понятным.

Answer 1

Вы присоединяете обработчик события к элементу, используя .click()так что это должно быть там на данный момент.

Это может быть гарантировано, если вы проверите page ready:

$(function() {
    // your code
}); 

или же window load:

$(window).load(function() {
    // your code
});

или если вы сохраняете скрипт на странице, в конце:

    <script type="text/javascript">
        // your code
    </script>
</body>

Другой способ заключается в использовании delegation:

$(selector_for_element_that_will_surely_be_there).on(event, selector_for_element_receiving_the_event, function() {
    // your code
});

// ie:
$(document).on('click', 'a.tocenter[href*=#]', function() {
    // your code
});

Посмотрите на это: http://api.jquery.com/on/

Answer 2

Это в основном говорит ваш браузер, чтобы запустить скрипт в конце концов DOM узлы готовы, т.е. загружены и обработаны.

Answer 3

Попробуйте добавить тег script в конец HTML-страницы, а не в заголовок. Это сделано из соображений производительности, чтобы ваша страница отображалась как можно быстрее, а затем загружались дополнительные файлы JavaScript.

Вы можете прочитать больше об этом по адресу: Как расположение тега script на странице влияет на функцию JavaScript, определенную в нем?

Answer 4

Оберните содержимое вашего файла в

$(function(){
//js goes here
});

или поместите ссылку на файл внизу вашей страницы

это позволяет DOM загружаться перед выполнением вашего скрипта.