javascript - 如何将参数传递给 Bootstrap 弹出窗口内容内的按钮单击函数？

Question

我有一个框对象列表，我正在使每个对象都有一个弹出窗口。我在弹出窗口中添加了一个按钮，并尝试为该按钮设置 click 事件函数。 click 函数 show 调用我的 showBox(box) 函数，该函数接受一个参数 box。如何将此 box 参数传递给弹出窗口内的按钮？这是我现在的代码:

var tabindex = 0;
box_resources.forEach(function(box) {
    var title = truncateTitle(box.title);
    var title_button = '<a tabindex="' + tabindex + '" class="box-title-item btn btn-primary btn-xs" role="button" data-trigger="focus" style="margin:5px" data-toggle="popover">' + title + '</a>';
    var $list_item = $(title_button);

    $("#coverages-master-list").append($list_item);

    var show_box_button = '<a class="btn btn-primary" role="button">' + box.title + '</a>';

    $list_item.popover({
        html: true,
        placement: 'top',
        title: box.title,
        content: '<p>' + show_box_button + '</p>',
        trigger: 'focus'
    });

    tabindex++;

});

如何为我的 show_box_button 绑定(bind)一个 click 事件，以及如何让它调用我的 showBox(box) 函数，该函数需要一个参数框？谢谢!

这是jsfiddle链接。

Answer 1

您可以使用 popover .on('shown.bs.popover'... 事件将您的点击事件添加到当前的 popover 按钮

make sure to use .one('click'... here not .on('click'...

然后使用添加当前元素的 tabindex 的 box_resources 数组调用 showBox 函数。

$(function () {

  var $coveragesMasterList = $("#coverages-master-list");

  var showBox = function(box) {
    console.log(box.title);
  }

  var box_resources = [
    { title: 'Box A' },
    { title: 'Box B' },
    { title: 'Box C' },
    { title: 'Box D' },
    { title: 'Box E' }
  ];

  var tabindex = 0;
  box_resources.forEach(function(box) {
    var title_button = '<a tabindex="' + tabindex + '" class="box-title-item btn btn-primary btn-xs" role="button" data-trigger="focus" style="margin:5px" data-toggle="popover">' + box.title + '</a>';

    var $list_item = $(title_button);

    $coveragesMasterList.append($list_item);

    var show_box_button = '<a class="btn btn-default btn-xs" role="button">' + box.title + '</a>';

    $list_item.popover({
      html: true,
      placement: 'top',
      title: box.title,
      content: '<p>' + show_box_button + '</p>',
      trigger: 'focus'
    });

    $list_item.on('shown.bs.popover', function () {
      var boxIndex = $(this).attr('tabindex');
      var $crntPopOver = $(this).next();
      var $crntPopOverBtn = $crntPopOver.find('.btn-default');
      $crntPopOverBtn.one('click', function() {
        showBox(box_resources[boxIndex]);
      })
    })

    tabindex++;
  });
});

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
body {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="coverages-master-list" style="display:inline-block; height:150px; overflow-y: auto"></div>