最新版本的 LightBox2 (v2.8.2) 现在允许链接出现在图像下方的文本中。这通常工作得很好。但我的链接需要调用一些javascript代码。
例如，当您单击“Click Here”时，下面的代码可以正常工作。
<a class="example-image-link"
href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg"
data-title="<a href='http://localhost/'>Click Here</a> ">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
</a>
对于我的代码，我需要 data-title 中的 href 来调用一些 javascript 代码。这些是我尝试过的。
data-title=" <a href='javascript:submitFormFunction();' >caption </a> ">
data-title=" <a href='#' onclick='submitFormFunction();' >caption </a> ">
data-title=" <a href='#' class='submitCreateFromPreview' >caption </a> ">
这些都不起作用，JavaScript 代码永远不会被调用。看起来，如果 href 不是正常结构的 URL( http://www.google.com 或 http://localhost )，它就不会执行任何操作。
这是我的 JavaScript 代码
$(".submitCreateFromPreview").click(function(){
submitFormFunction();
});
function submitFormFunction() {
form=document.getElementById('mainform_id');
form.target='_self';
form.action='http://localhost/create.do';
form.submit();
}
我基本上需要在单击 href 时提交表单中的所有字段。此代码适用于我的 web 应用程序中的其他位置，但它不想与 LightBox 描述 href 一起使用。
你知道我做错了什么吗？或者其他人有其他我可能没有尝试过的选择？
如有任何帮助，我们将不胜感激。
谢谢
最佳答案
我们可以使用 jQuery '.on()' 事件处理程序来添加事件。它们的优点是可以处理稍后添加到文档中的后代元素的事件。
在上面的情况下，我们可以使用如下代码:
$(document).ready(function(){
$(".lightbox").on("click",'.submitCreateFromPreview', function (e) {
submitFormFunction();
});
});
即使直接访问该函数，它也会执行。因此，可以实现这两个选项中的任何一个来执行“submitFormFunction()”函数。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
</head>
<body>
<section>
<h3>Two Individual Images</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1" data-title="Optional <a href='#' class='submitCreateFromPreview'>caption</a>."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional <a href='javascript:submitFormFunction()'>caption</a>."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/></a>
</div>
</section>
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function submitFormFunction(){
alert("Submit Form Function executed :: ")
console.log("Submit Form Function executed :: ");
}
$(document).ready(function(){
$(".lightbox").on("click",'.submitCreateFromPreview', function (e) {
submitFormFunction();
});
});
</script>
</body>
</html>
可以在此处访问使用 LightBox2 (v2.8.2) 的功能存储库
关于javascript - LIightBox2 数据标题描述链接与 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34582040/