LIghtBox2 ссылка для описания данных с текстом JavaScript

Последняя версия LightBox2 (v2.8.2) теперь позволяет отображать ссылку в тексте под изображением. Это нормально работает. Но моя ссылка должна вызвать код javascript.LIghtBox2 ссылка для описания данных с текстом 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>

Для моего кода мне нужно 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. Этот код работает в других местах моего webapp, но он не хочет работать с описанием LightBox href.

Любые идеи, что я делаю неправильно? Или у кого-нибудь есть другие варианты, которые, возможно, я не пробовал?

Любая помощь будет оценена по достоинству.

Благодаря

источник

2016-01-03 LatinCanuck

Мы можем использовать '.С()' JQuery обработчиков событий для добавления событий. Они имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже.

В вышеупомянутом случае мы можем иметь код, как показано ниже:

$(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

источник

2016-01-04 15:22:02

Да, это сделал. Спасибо за вашу помощь. – LatinCanuck

LIghtBox2 ссылка для описания данных с текстом JavaScript

ответ

Смежные вопросы