Why does the preventDefault () method fail?

Question

When choosing a picture, the link should not work, but it still throws to another page. The second day I fight. Please tell me what could be the snag?

I work in PhpDesigner8 . Because in WebStorm 'e issues on function(e)

unused parameter function.

 $(document).ready(function() { $('#small a').click(function(e) { $('#big img').hide().attr('src', $(this).attr('href')); $('#big img').load(function() { $(this).fadeIn(2000); }); e.preventDefault(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div id="gallery"> <div id="big"> <img src="images/gal/start.jpg" alt="Старт" /> </div> <div id="small"> <a href="images/gal/1.jpg"> <img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /> </a> <a href="images/gal/2.jpg"> <img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /> </a> <a href="images/gal/3.jpg"> <img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /> </a> <a href="images/gal/4.jpg"> <img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /> </a> </div> </div>

Strange you have for arguing the choice of IDE for development) Are you so hindered by the grayish highlighting of one character in WebStorm?)
You are right, I will return to WebStorm it is more convenient.

Accepted Answer · 2016-08-12T15:23:20

As it turned out during the discussion, you are using jQuery version 3.1.0.

Try replacing the outdated .load( method .load( with the current .on('load' :

 $('#big img').on('load',function() { $(this).fadeIn(2000); });

On the official documentation page, you can see that .load() obsolete in version 1.8 and has been removed in version 3.0.

Actually, all "event-methods" of the type .click() , .load() , .hover() , etc have long been recommended to be replaced with the unified interface .on('eventName', function(){...}) .

@FoxOnTheRun please) If that - we are always here, come in;)
@FoxOnTheRun from here morality - if the IDE emphasizes something, it is not just like that :)

Answer 2 · 2016-08-12T14:27:41

it is possible that the #small a trigger on your #small a trigger does not yet exist

so try instead

$('#small a').click(function(e) {})

use design

 $('body').on("click", "#small a", function(e) {});

I'm trying to figure out why the presented code does not work, when everything works in the video tutorial from which it is taken.

Why does the preventDefault () method fail?

2 answers 2

More articles: