I was using Bootstrap 4 popover and suddenly got stuck with this issue. The problem is I can not select the attribute inside data-content of a popover. Here is the code:
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>
If you look closely, data-content attribute has two <a> tag inside it. I am using JQuery to select the attribute (data-id) of this inner <a> tag. I've tried $(this).attr('data-id'); which returns undefined. So, my question is, how to get the attribute of this <a> [To be clear, the <a> which has a class .edit_web_ac].
I've tried these solutions, But none of these fully match with my situation.
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?
Any suggestion is highly appreciated.
<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>