未捕获的类型错误：$(...).ekkoLightbox 不是函数
Posted
技术标签:
【中文标题】未捕获的类型错误：$(...).ekkoLightbox 不是函数【英文标题】：Uncaught TypeError: $(...).ekkoLightbox is not a function 【发布时间】：2020-03-10 03:58:08 【问题描述】：我尝试在我的 wordpress 网站上使用 ekkolightbox，但每次选择图片时都会收到响应。
Uncaught TypeError: $(...).ekkoLightbox is not a function
我的猜测是我没有通过 cdn 正确导入库，但我无法弄清楚我做错了什么。
这是我的代码的缩短版本。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
</head>
<body>
<div class="col-md-4">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function( $ )
$(document).on('click', '[data-toggle="lightbox"]', function(event)
//alert("clicked"); //to test this function ran
event.preventDefault();
$(this).ekkoLightbox();
);
);
</script>
</body>【问题讨论】：
您是否遇到任何控制台错误？ 【参考方案1】：ekkoLightbox 使用 Bootstrap 4，查看参考here
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
</head>
<body>
<div class="col-md-4">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
</div>
<script type="text/javascript">
$(document).on('click', '[data-toggle="lightbox"]', function(event)
//alert("clicked"); //to test this function ran
event.preventDefault();
$(this).ekkoLightbox();
);
</script>
</body>【讨论】：
【参考方案2】：您的问题是由于您没有加载 Bootstrap jquery 文件。
尝试将脚本文件添加到您的 head html 页面中。
$( document ).ready(function()
$(document).on('click', '[data-toggle="lightbox"]', function(event)
event.preventDefault();
$(this).ekkoLightbox();
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="col-md-4">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
</div>【讨论】：
当我单击运行代码 sn-p 时，您的示例似乎对我不起作用【参考方案3】：此代码将解决您的问题
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
</head>
<body>
<div class="col-md-4">
<a id="test1" href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function( $ )
$(document).on('click', '[data-toggle="lightbox"]', function(event)
//alert("clicked"); //to test this function ran
event.preventDefault();
console.log("HERE");
$("#test1").ekkoLightbox();
);
);
</script>
</body>
https://jsfiddle.net/5qmsgf3z/
bootstrap 是 ekko 灯箱的依赖
【讨论】：
【参考方案4】：您错过了添加引导文件（js 和 css），为了让这个灯箱正常工作，您需要这个库提供的 css 文件
请在 jsfiddle 链接下方找到您的代码的工作副本
$(document).on('click', '[data-toggle="lightbox"]', function(event)
$(this).ekkoLightbox();
event.preventDefault();
);
// );
https://jsfiddle.net/antipotter2006/g0qmf4rb/
【讨论】：
我的项目中已经有 bootstrap 4。我需要再次引用它吗？以上是关于未捕获的类型错误：$(...).ekkoLightbox 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取未定义的属性 toLowerCase
JQuery：未捕获的类型错误：无法读取未定义的属性“调用”