Как нажать на ссылку внутри data-content всплывающего окна? - PullRequest
Новая
       2

Как нажать на ссылку внутри data-content всплывающего окна?

0 голосов
/ 10 февраля 2019

Я добавил ссылки в контент контента popover.Как я могу выполнить действие click () для ссылок, которые я поместил внутри data-content в popover -> (Bootstrap)

Я предоставил html якорные теги внутри атрибута data-content = ""поповер кнопка.

Ниже приведена ссылка, которая при нажатии покажет содержимое всплывающего окна.Содержимое данных внутри всплывающего окна имеет одну ссылку для загрузки и одну ссылку для скачивания.Теперь я хочу выполнить действие клика по ссылке для скачивания и скачивания.Как я могу это сделать? 

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

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Проблема в том, что всплывающее содержимое вставляется динамически.Это означает, что при инициализации html отсутствует в DOM, поэтому никакое событие щелчка еще не может быть прикреплено.

Чтобы решить эту проблему, вы можете делегировать событие , заставив родительский элемент прослушиватьсобытие: 

<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>
0 голосов
/ 10 февраля 2019

Прямо сейчас вы слушаете щелчки на элементе контейнера вместо якорных тегов в контенте поповера.

Вы можете сделать что-то вроде этого: 

    $('[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').

См. это рабочая скрипка .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...