Кнопка в bootstrap popover теряет атрибуты

Question

У меня есть bootstrap поповер для моего django веб-сайта, который открывается при нажатии кнопки. Внутри этого поповера есть еще одна кнопка. В настоящее время я делаю это, помещая HTML в «data-content» всплывающего окна, как показано ниже:

<a tabindex="0" id="{{prod.title}}" value="{{prod.id}}" type="button" 
class="btn btn-secondary btn-light mt-3 mb-0" 
data-toggle="popover"data-trigger="focus" data-html="true" data-content="

<div class='btn-group-vertical'>
<a type='button' data-show-value='{{prod.id}}' id='{{prod.id}}'
 class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
</div>"

>More Options</a>

Мне нужно получить «data-show-value» в jQuery, и в настоящее время я использую следующее, которое срабатывает при нажатии этой кнопки:

 $(document).on('click', '.wish', function () {

        var thisButton = $(this)[0]
        console.log(thisButton);
        var prodID = $(this).data("show-value");
}

Однако все, что это делает, это возвращает 'undefined'.

Я использовал console.log (thisButton), чтобы увидеть, как отображается код кнопки, и это так:

<a id=10 class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>

Это объясняет, почему «data-show-value» возвращается как неопределенное, поскольку сам атрибут не отображается на веб-странице.

Почему это так?

Answer 1

.wish - это класс, и может быть много элементов, у которых есть этот класс, вместо этого вам нужно указать идентификатор:

$(document).on('click', '.wish', function () {
        var thisId = $(this).attr('id');
        console.log(thisId); //check if this is the id of the element you want to trigger
        var prodID = $('#'+thisId).data("show-value");
}