javascript - 无法设置弹出框的所有data-x attr(cannot set all the data-x attr of a popover)

Question

I'd like to use the popover to reduce the place taken on my website to delete something.

(我想使用弹出窗口来减少在我的网站上删除某些东西的位置。)

I created a popover in my view :

(我在自己的视图中创建了一个弹出窗口：)

<a 
    class="btn text-muted" 
    data-toggle="popover" 
    data-placement="bottom"
    tabindex="0"
    data-content='
        <a 
            href="#" 
            class="remove-template {{ index }}" 
            data-index="{{ index }}"
        >
            remove template
        </a>
    '
>
    <span class="fa fa-trash"/>
</a>

I try to use it in my javascript code as such

(我试图在我的javascript代码中使用它)

import $ from 'jquery';
import 'bootstrap';

$('[data-toggle="popover"]').popover();

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
    $(".remove-template").click(function (event) {
        event.preventDefault();
        var index = $(this).data('index');

        //for debugging
        alert($(this).attr('class'));
        alert($(this).attr('data-index');

        $("#li-field-"+index).remove();
        updateTemplate();
    });
});

as an output I get a first alert that shows

(作为输出，我得到的第一条警报显示)

remove-template 0

(删除模板0)

So I know that the {{ index }} variable is set in my view but for the second one I get

(所以我知道{{ index }}变量是在我的视图中设置的，但对于第二个变量，我得到了)

undefined

(未定义)

Isn't it possible to set data-x attr on a popover directly in the data-content attr ?

(是否可以直接在data-content attr中的弹出窗口上设置data-x attr？)

EDIT:(编辑：)

I created a code snippet trying to reproduce the behaviour of my page and of course it work smoothly...

(我创建了一个代码片段，试图重现页面的行为，当然它可以顺利运行...)

 $(document).ready(function () { $("#pop").popover(); }); $('[data-toggle="popover"]').on('shown.bs.popover', function () { $('.remove-template').click(function(){ var index = $(this).data('index'); alert("index in the link = "+index); }) }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <div class="col-sm-4"> <button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="pop" data-content='<a href="#" class="remove-template 0" data-index="1" > remove template </a>'> <span class="fa fa-trash mr-1"/> Send to the trash </button> </div> 

So apparently the problem is somewhere else.

(因此，显然问题出在其他地方。)

In any case as it is not reproductible this question doesn't make sense any more.

(在任何情况下，由于它是不可复制的，这个问题不再有意义。)

  ask by Pierrick Rambaud translate from so

Answer 1

I created a code snippet trying to reproduce the behaviour of my page and of course it work smoothly...

(我创建了一个代码片段，试图重现页面的行为，当然它可以顺利运行...)

 $(document).ready(function () { $("#pop").popover(); }); $('[data-toggle="popover"]').on('shown.bs.popover', function () { $('.remove-template').click(function(){ var index = $(this).data('index'); alert("index in the link = "+index); }) }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <div class="col-sm-4"> <button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="pop" data-content='<a href="#" class="remove-template 0" data-index="1" > remove template </a>'> <span class="fa fa-trash mr-1"/> Send to the trash </button> </div> 

So apparently the problem is somewhere else.

(因此，显然问题出在其他地方。)

In any case as it is not reproductible this question doesn't make sense any more.

(在任何情况下，由于它是不可复制的，这个问题不再有意义。)