Правильное использование jQuery .data ()

Question

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ! Я ОБНОВИЛ ЭТОТ ВОПРОС С НОВЫМИ ДАННЫМИ И ССЫЛКАМИ

У меня есть этот код на основе этой документации

код работаетздесь: http://jsfiddle.net/mplungjan/7ZBxP/

но не здесь:

Я получаю Error: $(this).data("orgSize") is undefined

на линии width: $(this).data("orgSize").width,

  $(".ui-tooltip img.thumb")
 .live("mouseenter",function() {
    cont_left = $(".ui-tooltip").position().left; // no container until hover 
    // save this scaled down image size for later
    $(this).data("newSize",{width:this.width,height:this.height})
    $(this).parent().parent().css("z-index", 1);    
    $(this).animate({
      width: $(this).data("orgSize").width,
      height: $(this).data("orgSize").height,
      left: "-=50",
      top: "-=50"
    }, "fast");
  })

здесь, где яопределите это:

    var imageObject = $('<img/>').load(function(){
      var w = this.width;
      var h = this.height;
      var orgSize = {width:w,height:h};
      var imgId = "thumb_"+p_sPubNum;
      var actualImage = $('<img/>')
         .attr("id",imgId)
         .attr("src",sOpsUrl + sImageUrl)
         .attr("alt",loadingLabel+': '+p_sPubNum)
         .addClass("thumb");             
      // set EITHER width OR height if either is > 150
      if (w<h && w>150) actualImage.attr("width",150);
      else if (w>h && h > 150) actualImage.attr("height",150);

      $('.qTip2Image').append(actualImage);
      // save original size for later    
      $("#"+imgId).data("orgSize",orgSize);

    }).error(function() {
      if ((iPos + 1) < aPublicationNumbers.length) {
        var sNextNumber = aPublicationNumbers[(iPos + 1)];
        getImage(sNextNumber, sDirection);
      }
    }).attr("src",sOpsUrl + sImageUrl);

Answer 1

$('.qTip2Image').append(actualImage);
  // save original size for later    
$("#"+imgId).data("orgSize",orgSize); // <<<<<<<<<< too early

---

var actualImage = $('<img/>')
 .attr("id",imgId)
 .attr("src",sOpsUrl + sImageUrl)
 .attr("alt",loadingLabel+': '+p_sPubNum)
 .addClass("thumb")
 .data("orgSize",orgSize);  // <<<<<<<<<< This is much better!!!

Причина, по которой он работал в скрипке, была гораздо меньше DOM

Answer 2

Вы не устанавливаете src изображения, как вы ожидаете, что оно вызовет событие load.В этом случае добавьте обработчик ошибки event.Также вы не установили ширину и высоту для созданного элемента, поэтому у него не будет никаких измерений по умолчанию, если источник не установлен.

Где в вашем коде определено imgIdГде вы устанавливаете id для вновь созданного элемента?В таком случае, как он найдет $("#"+imgId)?

Answer 3

Это дает вам неопределенность, потому что вы обращаетесь к ширине, который не определен, так как вы только что создали элемент!

как вы можете видеть из этой скрипки, код верен

http://jsfiddle.net/ZL4DG/