jQuery problem z funkcja animate

pytanie zadane 20 lutego 2017 w JavaScript przez Alex.Ironside Stary wyjadacz (14,920 p.)

Witam. Dopiero ucze sie jQuery i teraz mam pytanie. Funkcja 2 dziala. Gdzie jest blad w funkcji 1?

Nie dziala

$(document).ready(function(){
    $(document).on('keydown','div',function(){
        $(this).animate({left:'+=10px'},500);
    });
});


Dziala

$(document).ready(function() {
  $(document).keydown(function() {
    $('div').animate({left:'+=10px'},500);
  });
});

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Div Racer</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
	</head>
	<body>
        <div></div>   
	</body>
</html>

CSS

div {
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background-color: #FF0000;
    position: relative;
}

1 odpowiedź

odpowiedź 20 lutego 2017 przez kosaa Stary wyjadacz (14,130 p.)

1. Nie ma takiego eventu jak 'div'.
2. Twój this to cały document. Animate na pewno nie zadziala.

Jaki efekt chcesz uzyskać?

komentarz 20 lutego 2017 przez solski Użytkownik (720 p.)

'div' w tym przypadku nie jest użyty jako event tylko jako selektor. To tzw. 'delegated events' i wykorzystuje się to m.in, kiedy chcemy nałożyć nasłuchiwanie na element, którego oryginalnie nie ma w dokumencie (jest doładowywany np. przez AJAX).

http://api.jquery.com/on/