0

При выборе картинки ссылка не должна срабатывать, но все равно кидает на другую страницу. Второй день бьюсь. Подскажите пожалуйста в чем может быть загвоздка?

Работаю в PhpDesigner8. Потому как в WebStorm'е выдает на 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>

7
  • А ссылки динамически добавляются?
    – Grundy
    12 авг 2016 в 14:21
  • в приведенном сниппете все работает
    – Grundy
    12 авг 2016 в 14:42
  • Странное у вас аргументирование выбора IDE для разработки) Вам так сильно мешает серенькая подсветка одного символа в WebStorm?) 12 авг 2016 в 14:56
  • Наверное да. Вы, правы, я вернусь к WebStorm он более удобный. 12 авг 2016 в 14:57

2 ответа 2

2

Как выяснилось в ходе обсуждения, вы используете версию jQuery 3.1.0.

Попробуйте заменить устаревший метод .load( на современное обращение .on('load':

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

На странице официальной документации можно увидеть, что .load() устарел в версии 1.8 и был удален в версии 3.0.

Собственно, все "event-методы" типа .click(), .load(), .hover(), etc давно уже рекомендуется заменять на унифицированный интерфейс .on('eventName', function(){...}).

5
  • Все заработало! Спасибо. 12 авг 2016 в 15:26
  • Вот так и учимся, по устаревшим методам. 12 авг 2016 в 15:27
  • Спасибо еще раз больше. Буду курить официальную документацию) 12 авг 2016 в 15:29
  • @FoxOnTheRun пожалуйста) Если что - мы всегда здесь, заходите ;) 12 авг 2016 в 15:31
  • @FoxOnTheRun отсюда мораль - если IDE что-то подчеркивает, это не просто так :) 12 авг 2016 в 16:07
-1

возможно, на момент присвоения триггера .click() ваших #small a в DOM еще не существует

поэтому попробуйте вместо

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

использовать конструкцию

$('body').on("click", "#small a", function(e) {});
18
  • Я пытаюсь разобраться, почему не работает именно представленный код, когда в видео уроке, из которого он взять, все работает. 12 авг 2016 в 14:31
  • тогда полный html и js в студию, пожалуйста 12 авг 2016 в 14:32
  • Кусок html и весь js и есть 12 авг 2016 в 14:38
  • забавно. проверил в хроме этот код - все работает прекрасно 12 авг 2016 в 14:44
  • А что может быть не так тогда? И хром и ИЕ и ФФ одно и то же выдают 12 авг 2016 в 14:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.