如何將參數傳遞給引導程序彈出窗口內容內的按鈕單擊函數？

Question

我有一個框對象列表，並且使每個對象都有一個彈出窗口。 我在彈出窗口內添加了一個按鈕，並且試圖設置按鈕的click event函數。 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綁定click事件，如何使其調用帶有參數box showBox(box)函數？ 謝謝！

這是jsfiddle鏈接。

Answer 1

您可以使用.on('shown.bs.popover'...事件將您的click事件添加到當前彈出按鈕

確保使用.one('click'...這里不是.on('click'...

然后使用box_resources數組添加當前元素的tabindex來調用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>