jQuery Mobile PhotoSwipe：在不是函数中未定义

Question

我正在尝试设置一个简单的 jQuery Mobile PhotoSwipe 示例：

http://codepen.io/aherrick/pen/pvEsn

我在本地和 CodePen 上不断收到此错误。

Uncaught TypeError: undefined is not a function 

Answer 1

错误在 PhotoSwipe 文件code-photoswipe-jQuery-1.0.11.js，行4741：

$(thumbEls).live('click', function(e){

As of jQuery 1.7, the .live() method is deprecated，看来您使用的是 jQuery 1.7.1。要解决此问题，您应该将行替换为：

$(document).on('click', 'thumbEls', function(e){

但是，问题似乎在于 PhotoSwipe 与 jQuery Mobile 的集成。我做了很多测试，似乎 PhotoSwipe 不适用于最新版本的 jQuery 和 jQuery Mobile。从这个最小的代码示例中可以看出，最新的 PhotoSwipe 可与 jQuery 1.5.2 和 JQM 1.0a4.1 一起使用。如果我更新这些库 PhotoSwipe 停止工作。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://photoswipe.com/latest/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <link href="http://photoswipe.com/latest/photoswipe.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        div.gallery-row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
        div.gallery-item { float: left; width: 33.333333%; }
        div.gallery-item a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
        div.gallery-item img { display: block; width: 100%; height: auto; }
        #Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }
    </style>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/simple-inheritance.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/jquery.animate-enhanced.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/code-photoswipe-jQuery-1.0.8.min.js"></script>
</head>
<body>
<div data-role="page" id="gallery" class="gallery-page">
    <div data-role="content">       
        <div class="gallery">
            <div class="gallery-item"><a href="http://i.imgur.com/Cxagv.jpg"><img src="http://i.imgur.com/Cxagv.jpg" alt="Image 001" /></a></div>
            <div class="gallery-item"><a href="http://i.imgur.com/Cxagv.jpg"><img src="http://i.imgur.com/Cxagv.jpg" alt="Image 002" /></a></div>
            <div class="gallery-item"><a href="http://i.imgur.com/Cxagv.jpg"><img src="http://i.imgur.com/Cxagv.jpg" alt="Image 003" /></a></div>
        </div>
    </div>  
</div>
<script>
$(document).ready(function()
{
    $("div.gallery a").photoSwipe();        
});
</script>
</body>
</html>