时间戳

首页 > 解决方案 > 如何单击弹出窗口数据内容内的链接？

javascript - 如何单击弹出窗口数据内容内的链接？

问题描述

我已将链接添加到弹出数据内容中。如何对放置在 popover 的数据内容中的链接执行 click() 操作-->(Bootstrap)

我在弹出按钮的 data-content="" 属性中提供了 html 锚标记。

下面是一个链接，单击该链接将显示弹出内容。弹出框内的数据内容有一个上传和一个下载链接。现在我想对上传和下载链接执行点击操作。我怎样才能做到这一点？

<html>
    <body>
        <a href="#" 
            data-toggle="popover-upload" 
            data-trigger="focus" 
            data-placement="bottom" 
            title="" 
            data-content="<div class='link-Updown'>
                <a href='' class='upload' title='Upload the Zip file here' 
                style=&quot margin: 7px;margin-bottom: 7px;display:block;&quot>Upload</a>

                <a href='' title='Download' 
                style=&quot margin: 7px;margin-bottom: 7px;display:block;&quot>Download</a></div>" 

            style="font-family: calibri; font-size: 15px;color: darkslategrey;font-weight: bolder" ><i>Upload/Download</i>

        </a>
        <script>
            $(document).ready(function(){
                $('[data-toggle="popover-upload"]').popover({html:true})
                    .on("click",function(){});
            })            
         </script>
    </body>
</html>

标签： javascriptjqueryhtmltwitter-bootstrap-3

解决方案

现在，您正在收听对容器元素的点击，而不是弹出框内容中的锚标记。

你可以这样做：

    $('[data-toggle="popover-upload"]').popover({
         html:true
    }).parent().on('click', '.link-Updown a', function(e) {
        e.preventDefault();

        // do your thing

    });

data-action您可以通过给它们一个可以读取的数据属性来区分上传或下载的点击$(this).data('action')。

看到这个工作小提琴。

推荐阅读