How do I select an id nested inside a data attribute using jQuery?

Question

I have a delete button that when clicked triggers a popover. In that popover I have the real link doing the deleting. I want to select the id of the link inside that data-content(Bootstrap) of of the popover.

I have multiple elements on a page that could be deleted so I don't know their IDs beforehand but they have the same class, so I generate an ID, then use $(this).attr('id') to select the particular delete link.

This is the popover button and the link inside the data-content

<button tabindex="0" role="button" class="btn btn-danger btn-sm" data-toggle="popover"           
   data-placement="top" data-html="true" data-content="<a class='btn delete-draw text-danger' 
   id='[generatedId]'>Delete Draw</a>">Delete Draw
</button>

Now this is the jquery code

$(".delete-draw").click(function () {
    event.preventDefault();
    var drawId = $(this).attr("id");
    // make ajax delete call
 });

If I move the id and .delete-draw class to the outer popover button, it works well. So I'm thinking it has to do with the id of the a tag being nested in another data-attribute

So what is it you want to do? What do you need help with? The content of `data-content` is not rendered so `$('.delete-draw')` would not select the `a` element. — PeterKA, Jul 05 '20 at 14:18
@PeterKA I believe my question title sums up what I need. However, kindly check my comment on Swati's answer. Thanks — Richard, Jul 05 '20 at 14:35
Also the data-content is rendered fine `data-content="` That's from page source — Richard, Jul 05 '20 at 14:37
As it is, the `anchor` tag is not rendered, in other words `Delete Draw` is not part of the pages HTML markup, hence your question. You do have to use a delegated event. — PeterKA, Jul 05 '20 at 14:47
[Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — charlietfl, Jul 05 '20 at 14:52

score 1 · Accepted Answer · answered Jul 05 '20 at 14:47

1

Since that anchor tag markup is added to the page after DOM Ready event here is how you would select that tag:

$(document).on('click', '.delete-draw', function() {
    let id = this.id;
    console.log( id );
});

answered Jul 05 '20 at 14:47

PeterKA

24,158
5
26
48

Ah this already makes perfect sense. I totally forgot about the DOM being ready – Richard Jul 05 '20 at 14:49
Glad I could be of help. Enjoy!! – PeterKA Jul 05 '20 at 14:52

score 0 · Answer 2 · answered Jul 05 '20 at 14:20

0

You can passed the custom attribute inside $() and then access the id value.

Demo Code :

$(".btn-sm").click(function() {
  event.preventDefault();
  //getting custom attribute
  var drawId = $(this).attr("data-content");
  //selecting id using that elemnt
  var ids =$(drawId).attr('id')
  console.log(ids)

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button tabindex="0" role="button" class="btn btn-danger btn-sm" data-toggle="popover" data-placement="top" data-html="true" data-content="<a class='btn delete-draw text-danger' 
   id='1324'>Delete Draw</a>">Delete Draw
</button>

answered Jul 05 '20 at 14:20

Swati

28,069
4
21
41

Upvoted since this is a solution to a similar problem, but I dont what the ajax firing after clicking the popover button. This select the id quite alright, but it selects it immediately the popover is clicked. I want the selection to happen only when the `a` tag inside the data-content is clicked – Richard Jul 05 '20 at 14:33
So you are showing content of a tag in your pop up ? How? Can you elaborate that? – Swati Jul 05 '20 at 14:44
This doesn't solve the issue of binding event listener to the `` when it is actually inserted in the popover – charlietfl Jul 05 '20 at 14:53
Ahh ..yes @charlietfl .. I think I misunderstood the question :) – Swati Jul 05 '20 at 14:54

How do I select an id nested inside a data attribute using jQuery?

2 Answers2