2013-04-05 80 views
-1

前段時間,我使用JQuery 1.8.3創建了一個Balloon插件。插件停止使用JQuery 1.9.1

當我從JQuery 1.8.3更新到JQuery 1.9.1時,我的插件停止工作。

氣球不再顯示。我回到1.8.3,它的工作原理。

我試着瞭解什麼可能是錯的,但我找不到它。

請問有人能幫我嗎?這是我的代碼:

(function ($) { 
     $.fn.Balloon = function (options) { 
    var defaults = { 
      balloon: "", 
      class: "Balloon", 
      click: false, 
      id: "Balloon", 
      sensible: false, 
      x: -4, 
      y: -40 
     }; 
     var options = $.extend({}, defaults, options); 
     var balloon; 
     $(this).each(function() { 
      var title = $(this).attr("title"); 
      if (title == undefined) return; 
      $(this).hover(function (e) { 
      $(this).removeAttr("title") 
      balloon = "<div id='{id}' class='{class}'><span class='Text'>{content}</span><span class='Background'></span></div>" 
      if (options.balloon == "") { 
       balloon = balloon.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", title); 
      } else { 
       balloon = balloon.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", options.balloon).replace("{title}", title); 
      } 
      $("body").append(balloon); 
      $("#" + options.id).fadeIn("fast"); 
      }, 
      function() { 
      $("#" + options.id).remove(); 
      $(this).attr("title", title); 
      }); 
      $(this).mousedown(function (e) { 
      if (options.click) { 
       $("#" + options.id).remove(); 
       $(this).attr("title", title); 
      } 
      }), 
      $(this).mousemove(function (e) { 
      var x = e.pageX + options.x; 
      var y = e.pageY + options.y; 
      if (options.sensible) { 
       var width = $("#" + options.id).width(); 
       var height = $("#" + options.id).height(); 
       var right = $(window).width() - (x + width); 
       var bottom = $(window).height() - (y + height); 
       if (right < 20) { 
       x = e.pageX - width - options.x; 
       } 
       if (bottom < 20) { 
       y = e.pageY - height - options.y; 
       } 
      } 
      $("#" + options.id).css({ top: y, left: x }); 
      }); // Mouse Move 
     }); // Balloon 
     }; 
    })(jQuery); 

回答

0

我能解決它通過更換懸停:

$(this).mouseenter(function (e) { 
    // Code 
}), 
$(this).mouseleave(function (e) { 
    // Code 
}); 

謝謝你, 米格爾

2

使用jQuery Migrate找出你需要修復的jQuery 1.9什麼。

這個插件可以用來檢測和恢復的API或特徵 已jQuery中被棄用,作爲1.9版本中刪除。有關插件 生成的消息的更多信息,請參閱 warnings page。有關在jQuery 1.9, 中所做更改的更多信息,請參見upgrade guideblog post

在您的網頁,加載這個插件腳本的jQuery後:

<script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> 
0

你提到一個編寫插件。看看http://jquery.com/upgrade-guide/1.9/來看看jQuery 1.9帶來的變化。他們做了一堆突破性的改變。

我會使用jQuery Migrate插件來識別問題,但不要在生產中使用它。你應該讓你的插件使用jQuery 1.9+。