Div не исчезнет / не исчезнет

#javascript #jquery #html #css #asp.net

#javascript #jquery #HTML #css #asp.net

Вопрос:

Я пытаюсь заставить div исчезать и включаться при нажатии кнопки. Он работает на jfiddle, но по какой-то причине он не работает на моем asp.net страница:

 $('#btn').click(function(e){    
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});

<div><a href="#" id="btn">fade div</a></div>
<div id="fancy">Fancy Div</div>

http://jsfiddle.net/3XwZv/1859/

мой asp.net страница:

 <html>
<head>
 <script type="text/javascript" src="../javascript/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="../javascript/jquery-ui.js"></script>

<script type="text/javascript" class="init">


    $('#btn').click(function (e) {
        $('#fancy').fadeOut('slow', function () {
            $('#fancy').fadeIn('slow');
        });
    });
</script>

</head>
<body>
<div><a href="#" id="btn">Fade div</a></div> 
<div id="fancy">Fancy Div</div>
</body>
</html>

Ответ №1:

Если вы поместите свой код jQuery в раздел head и попытаетесь манипулировать элементами DOM, это не сработает, поскольку в это время ваш HTML-документ еще не загружен. Итак, у вас есть два способа решить эту проблему.

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

 $(document).ready(function () {
    $('#btn').click(function (e) {
        $('#fancy').fadeOut('slow', function () {
            $('#fancy').fadeIn('slow');
        });
    });
});

Второе: поместите свой код jQuery внизу вашей страницы.

Ответ №2:

Можете ли вы поделиться страницей, на которой вы это реализовали? Трудно понять, что происходит не так, не видя ошибочный код. Моим первым предположением было бы то, что jQuery не запущен на вашей странице.

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

 $('#btn').click(function(e){    
    console.log('Click fired');
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});

Ответ №3:

Похоже, вы, возможно, не выполнили привязку: попробуйте этот код

 $(function(){
  $('#btn').click(function(e){    
    console.log('Click fired');
    $('#fancy').fadeOut('slow', function(){
       $('#fancy').fadeIn('slow');
    });
});
}