Question

最新版本的LightBox2（v2.8.2）现在允许链接显示在图像下的文本中。这通常很好。但是我的链接需要调用一些javascript代码。

例如，当您点击Click Here时，下面的代码可以正常工作。

    data-title="  <a href='javascript:submitFormFunction();'  >caption </a> ">  
    data-title="  <a href='#' onclick='submitFormFunction();' >caption </a> ">  
    data-title="  <a href='#' class='submitCreateFromPreview' >caption </a> ">

对于我的代码，我需要data-title中的href来调用一些javascript代码。这些是我尝试过的。

    $(".submitCreateFromPreview").click(function(){
        submitFormFunction();
    });         


    function submitFormFunction() {
        form=document.getElementById('mainform_id');                
        form.target='_self';
        form.action='http://localhost/create.do';
        form.submit();
    }

这些都不起作用，javascript代码永远不会被调用。看来如果href不是通常结构化的URL（http://www.google.com或http://localhost），它就什么都不做。

这是我的javascript代码

{
    method: 'POST',
    path: '/api/new-request',
    config: {
        payload: {
            output: 'stream',
            parse: true,
            allow: 'multipart/form-data',
            maxBytes: 20000000,
            timeout: 60000
        },
    },
    handler: api.requests.new
}

我基本上需要在点击href时提交表单中的所有字段。此代码适用于我的webapp中的其他位置，但它不希望使用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

LIghtBox2数据标题描述链接与JavaScript

1 个答案: