当我在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文件中,然后将其链接到:
它不起作用,让它工作我必须把它包装进去:
$( window ).load(function() { ... });
如果我这样做有效.
我是JavaScript/jQuery的新手,这是正常的还是我做错了什么?为什么它表现得那样?这样做是一种好习惯吗?
在外部文件中使用它的唯一目的是保持代码清洁和易懂.
您正在使用事件处理程序附加到元素.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/