Пытался добавить функции пользовательского интерфейса jquery к моим изображениям, которые я загружаю из файла json. Почему всплывающая подсказка и наведение курсора мыши не работают с моим идентификатором img, который я создаю при загрузке изображений? Кроме того, я использую меню вкладок jquery ui, используемое для загрузки изображений прямо из моей папки через файл html и ссылки на разные вкладки в меню. Есть ли способ заставить его работать, когда я загружаю изображения из файла json?

$(document).ready(function() {
  $(document).tooltip();


  $("#click").mouseenter(function() {
    $("this").stop().animate({
      width: "220px",
      height: "170px"
    });
  });

  $().mouseleave(function() {
    $(this).stop().animate({
      width: "200px",
      height: "150px"
    });
  });

  $("#contentBox").tabs();

  $("a[href=#click]").click(function() {
    $("#contentBox").tabs("option", "active", 1);
  });
  $("a[href=#recept2]").click(function() {
    $("#contentBox").tabs("option", "active", 2);
  });
  $("a[href=#recept3]").click(function() {
    $("#contentBox").tabs("option", "active", 3);
  });
  $("a[href=#recept4]").click(function() {
    $("#contentBox").tabs("option", "active", 4);
  });
  $("a[href=#recept5]").click(function() {
    $("#contentBox").tabs("option", "active", 5);
  });
  $("a[href=#recept6]").click(function() {
    $("#contentBox").tabs("option", "active", 6);
  });
  $("a[href=#recept7]").click(function() {
    $("#contentBox").tabs("option", "active", 7);
  });
  $("a[href=#recept8]").click(function() {
    $("#contentBox").tabs("option", "active", 8);
  });
  $("a[href=#recept9]").click(function() {
    $("#contentBox").tabs("option", "active", 9);
  });


  var jsonDoc = "mylist.json";
  $.getJSON(jsonDoc, function(json) {
    var imgList = "";
    $.each(json.imgs, function() {
      imgList += '<a href="#recept"><img id="click" src= "' + this.imgPath + '"></a>';
    });

    $("#picList").append(imgList);
  });


});
0
Znowman 28 Окт 2015 в 22:24

2 ответа

Лучший ответ

Поскольку элемент img не существует при создании документа, $("#click").mouseenter или любые другие триггеры для этого элемента не работают при включении в $(document).ready. Сделайте свой JSON синхронным, чтобы вы знали, что создание элемента завершено, а затем добавьте триггеры, связанные с элементом.

0
SunKnight0 28 Окт 2015 в 19:32

Проблема заключается в порядке выполнения ваших методов jQuery.

$.getJSON по умолчанию является асинхронным , поэтому вы можете либо добавить обработчики, используя .done() в XHR, либо добавить обработчики в метод обратного вызова getJSON().

Если вы используете синхронный API, установив async:false, ваше приложение будет блокироваться во время HTTP-запроса, пока сервер обрабатывает и время, необходимое для отправки ответа. Из JQuery Docs:

Обратите внимание, что синхронные запросы могут временно заблокировать браузер, отключив любые действия, пока запрос активен.

Для получения информации об асинхронности и синхронизации в Javascript см .: Является ли Javascript синхронным (блокирующим) или Асинхронный (неблокирующий) по умолчанию

2
Community 23 Май 2017 в 11:59