Question

我试图设置一个简单的jQuery Mobile PhotoSwipe示例：

我一直在本地和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>

jQuery Mobile PhotoSwipe：未定义的函数

1 个答案: