灯箱 2 data-title 描述 link 和 JavaScript

Question

最新版本的 LightBox2 (v2.8.2) 现在允许 link 出现在图像下方的文本中。这通常工作正常。但是我的 link 需要调用一些 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> ">

None 这些工作中，javascript 代码永远不会被调用。看起来，如果 href 不是正常结构的 URL (http://www.google.com or 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 时提交表单中的所有字段。此代码适用于我的网络应用程序的其他位置，但它不想与 LightBox 描述 href 一起使用。

知道我做错了什么吗？或者其他人有其他我可能没有尝试过的选择吗？

如有任何帮助，我们将不胜感激。

谢谢

Answer 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

灯箱 2 data-title 描述 link 和 JavaScript

LIghtBox2 data-title description link with JavaScript

html

javascript

jquery

lightbox

lightbox2