Показать загрузка страницы не работает должным образом

Question

У меня есть эта разметка:

<div class="container" id="logo" style="text-align:center;"> 
    //other loading stuff 
    <a href="" id="enter" onclick="EnterSite()">Enter Website</a> 
</div> 

<div id="content"> 
//main content 
</div>  

В настоящее верхней перед закрывающим тегом head у меня есть:

<script> 
    $(function() { 
     $('#enter').hide(); 
    }); 
    $(window).load(function() { 
     $('#enter').show(); 
    }); 
</script> 

А внизу у меня есть (до закрытие body тег):

function EnterSite() { 
     $("#enter").click(function(){ 
      $("#content").show(2000); 
     }); 
    } 

и CSS:

#logo { 
    z-index: 99; 
} 
#content { 
    display: none; 
} 

Но это только показывает logo DIV и нажав на ссылку Enter Website ничего не делает.

, что я хочу сделать, это показать logo DIV до загрузки страницы (window.load) с Enter Website ссылки скрытой. Как только страница загружена, то показать ссылку, которая по щелчку будет показывать content DIV

Answer 1

Проблема в том, вы используете onclick обработчик, чтобы связать новый обработчик щелчка с помощью JQuery. Новый обработчик кликов не будет срабатывать при первом нажатии на тег <a>, потому что это событие уже произошло.

Либо удалите onclick из разметки и просто использовать

$(function(){ 
    $("#enter").hide().click(function(){ 
     $("#content").show(2000); 
    }); 
}) 

Или изменятся:

function EnterSite() {  
     $("#content").show(2000); 

} 

Я предлагаю использовать первое решение и избежать смешиваний встроенного сценария и JQuery, чтобы сохранить все ваши сценарии ненавязчивыми и легче поддерживать

Answer 2

Попробуйте следующее:

$(window).load(function() { 
    $('#enter').show(); 
}); 
$(document).ready(function() { 
    $("#enter").click(function() { 
     $("#content").show(2000); 
    }); 
}); 

Fiddle here.