带有 JavaScript 的 LIghtBox2 数据标题描述链接答案

【问题标题】：LIghtBox2 data-title description link with JavaScript带有 JavaScript 的 LIghtBox2 数据标题描述链接
【发布时间】：2016-01-04 23:22:02
【问题描述】：

最新版本的 LightBox2 (v2.8.2) 现在允许链接出现在图像下方的文本中。这通常工作正常。但是我的链接需要调用一些javascript代码。

例如，当您单击“单击此处”时，以下代码可以正常工作。

<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 一起使用。

任何想法我做错了什么？或者其他人有其他可能我没有尝试过的选择？

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： javascript jquery html lightbox lightbox2

【解决方案1】：

我们可以使用 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) 的功能库可以在这里访问

https://github.com/nitinsinha/Debugs.git

【讨论】：

是的，做到了。感谢您的帮助。