Question

我当时使用的是Bootstrap 4 popover，突然陷入了这个问题。问题是我无法在弹出窗口的数据内容内选择属性。这是代码：

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>

如果仔细观察，数据内容属性中会有两个<a>标签。我正在使用JQuery选择此内部<a>标记的属性（ data-id ）。我尝试了$(this).attr('data-id');，它返回了undefined。因此，我的问题是，如何获取此<a>的属性[要清楚，<a>的类为.edit_web_ac]。

我已经尝试过这些解决方案，但是这些都不完全符合我的情况。

How to select Element Id inside attribute tag with jQuery?

How to select an element based on the property of an object inside a data attribute?

任何建议都值得赞赏。

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

Answer 1

尝试使用单独的div更改数据内容，并通过jquery内容调用ID

<a href = '#' data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus'>Options</a>

从锚定标记中删除数据内容，并将其作为单独的div

<div class='pop-div' style = 'display:none;'><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>

然后在jquery中添加

$(function () {
            $('[data-toggle="popover"]').popover({
              toggle: 'popover',
              placement: 'right',
              title: 'Options',
              html: true,
              content: function () {
                  return $('.pop-div').html();
              },
            });
    });

希望它能起作用！

Answer 2

我建议将HTML内容放在ID为单独的div中

cout << static_cast<void*>(str1) << endl

在JavaScript / jQuery中，如下所示：

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

弹出框的数据内容内的元素的select属性

2 个答案: