Question

我已将链接添加到popover数据内容中。我如何对放置在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>

Answer 1

现在，您正在监听的是容器元素的点击，而不是弹出窗口内容中的定位标记。

您可以执行以下操作：

    $('[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')来读取）来区分上载或下载的点击。

请参阅此working fiddle。

Answer 2

问题是弹出窗口内容是动态插入的。这意味着在初始化时html不存在于DOM中，因此还没有附加的点击事件。

要解决此问题，您可以通过使父元素监听事件来delegate the event：

<a href="#" data-toggle="popover-upload" data-content="
<div class='link-Updown'>
  <a href='#'>Upload</a>
  <a href='#'>Download</a>
</div>">
  Upload/Download
</a>

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

  // delegate click event from the document
  $(document).on("click", ".link-Updown a", function(event) {
    event.preventDefault();
    console.log("download or upload clicked")
  })
});
</script>

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

2 个答案: