无法设置弹出框的所有data-x attr

时间:2019-11-27 10:06:15

标签: javascript jquery twitter-bootstrap twig

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

我在自己的视图中创建了一个弹出框:

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

我尝试在自己的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();
    });
});

作为输出,我得到第一个显示

的警报
  

删除模板0

因此,我知道在我的视图中设置了{{ index }}变量,但对于第二个变量,我得到了

  

未定义

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

编辑:

我创建了一个代码段,试图重现页面的行为,当然它可以正常运行...

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

因此,显然问题出在其他地方。在任何情况下,由于无法繁殖,这个问题不再有意义。

2 个答案:

答案 0 :(得分:0)

实际上,您正在使用.click()函数,该函数正在侦听给定jQuery对象上的click javascript事件。

但是就像我之前说过的那样,jQuery将无法侦听此事件,因为您在DOM生成之后生成了该html节点。

要解决您的问题,您需要侦听一个已经存在的对象(例如body),然后观看所需的html类:请参见示例

function addBlock() {
	var test = '<div class="foo" data-test="after">X</div>';
	$('#container').append(test);
}

$(document).ready(function() {
  addBlock();
  addBlock();
});

// This will work
$('body').on('click', '.foo', function() {
  $('#bodyClickEvent').empty();
  if (!$(this).hasClass('staticFoo')) {
    $('#clickEvent').html('<span>&#8203;</span>');
  }
	$('#bodyClickEvent').html($(this).data('test'));
});

// This part of code will not work
$('.foo').on('click', function() {
  $('#clickEvent').empty();
	$('#clickEvent').html($(this).data('test'));
});
.foo {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: rgb(50, 50, 50);
  margin: 5px;
  padding: 5px;
  color: white;
}

.staticFoo {
  background-color: blue;
}

.event {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 5px;
  border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="description">
  <ul>
  <li>Y block are write in the HTML and generated with the DOM generation.</li>
  <li>X block are generated with a javascript function.</li>
  </ul>
  
  <p>Try to click on different blocks to see what append.</p>
</div>

<div id="container">

<div class="foo staticFoo" data-test="before">Y</div>
<div class="foo staticFoo" data-test="before">Y</div>

</div>
<div class="event">click event data: <b id="clickEvent"></b></div>
<div class="event">body event data: <b id="bodyClickEvent"></b></div>

答案 1 :(得分:-1)

如前面注释中所述,jquery doc设置值必须使用:

$( "body" ).data( "foo", 52 );

然后,要获取任何data值,请使用:

$( "body" ).data( "foo" ); // 52