jquery - 如何使用 Bootstrap PopOver 和 jQuery 删除项目

Question

我有一个显示“删除”按钮操作的 Bootstrap 弹出窗口：

<a href="#" class='dd' rel="popover" data-content="<a href='#' class='removeNote btn' data-id='{{$note->id}}'  >Remove</a>" data-original-title="Remove Note?"><i class='icon-remove'></i></a>

我希望删除操作“removeNote”调用删除 jQuery 代码块，但事实并非如此。如果我删除弹出框代码，它工作正常。有任何想法吗？

$(".removeNote").click(function() {

var id = $(this).data("id");

$.ajax({
    type: 'DELETE',
    url: '/note/' + id,
    data: {
        'id': id
    },
    success: function(msg) {

     $(".note" + id ).fadeOut(500);
     $(".poster" + id ).fadeOut(500);
 }
 });

 });

Answer 1

我认为如果你用简单的引号替换双引号，反之亦然。像这样：

<a href="#" class='dd' rel="popover" data-content='<a href="#" class="removeNote btn" data-id="{{$note->id}}">Remove</a>' data-original-title="Remove Note?"><i class='icon-remove'></i></a>

但我会将我的链接放入标记中，而不是放入某些数据标签中。这就是它的工作方式：

弹出框 JS 代码：

$("[data-rel=popover]").popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

弹出框 HTML 标记：

<a href="#" id="popover">the popover link</a>
<!-- popover content: Header and content -->
<div id="popover-head" class="hide">Remove Note</div>
<div id="popover-content" class="hide">
<a href="#" class="removeNote btn" data-id="{{$note->id}}">Remove</a>
</div>