jQuery click () событие - PullRequest
Новая
       0

jQuery click () событие

1 голос
/ 14 декабря 2011

Что не так в этом фрагменте HTML-кода с некоторыми функциями JQuery?Я не понимаю, почему не работают функции jquery!Спасибо! 

<html>
<head>  
    <style> 
      p { color:red; margin:5px; cursor:pointer; } 
      p.hilite { background:yellow; } 
     </style> 

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

    <script type="text/javascript">

        $("p").click(function () {
            $(this).slideUp();
            return false;
        });

        $("p").hover(function () {
            $(this).addClass("hilite");
        }, function () {
            $(this).removeClass("hilite");
        }); 
    </script> 
</head>
<body>
    <h2>Click</h2>

    <p>First Paragraph</p> 
    <p>Second Paragraph</p> 
    <p>Yet one more Paragraph</p>
</body>
</html>

Ответы [ 4 ]

4 голосов
/ 14 декабря 2011

Ваши привязки выполняются до того, как DOM будет готов, поскольку вы не заключили их в $(function() {}), поэтому при выполнении привязок абзацы не существуют.Пример кода: 

$(function() {
        $("p").click(function () {
            $(this).slideUp();
            return false;
        });

        $("p").hover(function () {
            $(this).addClass("hilite");
        }, function () {
            $(this).removeClass("hilite");
        }); 
});
2 голосов
/ 14 декабря 2011

измените свой код на: 

<html>
<head>  
<style> 
  p { color:red; margin:5px; cursor:pointer; } 
  p.hilite { background:yellow; } 
 </style> 

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

<script type="text/javascript">
    $(document).ready(function(){ // that is trigger when the document is loaded
       $("p").click(function () {
        $(this).slideUp();
        return false;
       });

       $("p").hover(function () {
        $(this).addClass("hilite");
       }, function () {
        $(this).removeClass("hilite");
       });
    });

</script> 
</head>
<body>
<h2>Click</h2>

<p>First Paragraph</p> 
<p>Second Paragraph</p> 
<p>Yet one more Paragraph</p>
</body>
</html>
0 голосов
/ 31 октября 2014

Просто поместите ваш <script>....</script> в конце тега body и поместите alert() в событие click, чтобы знать. Это будет работать ..

0 голосов
/ 25 сентября 2014

@ david-laberge , Нет необходимости помещать событие click() в document.ready(), если это не событие, которое должно выполняться только после того, как документбыл готов.

...