我想使用弹出窗口来减少在我的网站上删除某些东西的位置。
我在自己的视图中创建了一个弹出框:
<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>
因此,显然问题出在其他地方。在任何情况下,由于无法繁殖,这个问题不再有意义。
答案 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>​</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