атрибут атрибута внутри data-content поповера - PullRequest
Новая
       67

атрибут атрибута внутри data-content поповера

0 голосов
/ 01 декабря 2019

Я использовал Popover Bootstrap 4 и внезапно застрял с этой проблемой. Проблема в том, что я не могу выбрать атрибут внутри data-content поповера. Вот код:

HTML 

 <a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="<div class='pop-div'><a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a></div>">Options</a>

Если присмотреться, атрибут data-content содержит два тега <a> внутри. ,Я использую JQuery для выбора атрибута ( data-id ) этого внутреннего тега <a>. Я пытался $(this).attr('data-id');, который возвращает undefined. Итак, мой вопрос, как получить атрибут этого <a> [Для ясности, <a>, который имеет класс .edit_web_ac].

Я пробовал эти решения, но ни один изони полностью соответствуют моей ситуации.

Как выбрать идентификатор элемента в теге атрибута с помощью jQuery?

Как выбрать элемент на основе свойства объектаобъект внутри атрибута данных?

Любое предложение высоко ценится. 

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

 <a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="<div class='pop-div'><a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a></div>">Options</a>


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

   $('body').on('click', '.edit_web_ac', function (e) { 
     e.preventDefault();
     var content = $(this).attr('data-id');
     alert(content); //returns 'undefined'
   })

  })
</script>
</body>

</html>

1 Ответ

0 голосов
/ 02 декабря 2019

Я бы предложил поместить содержимое HTML в отдельный div с идентификатором: 

<a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="YOURID">Options</a>

<div id="YOURID">
   <div class='pop-div'>
       <a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a>
   </div>
</div>

В JavaScript / jQuery что-то вроде этого: 

var content = $('#YOURID .edit_web_ac').data('id);
...