How to pass an argument to a button click function inside bootstrap popover content?

Question

I have a list of box objects and I am making each of them has a popover window. I add a button inside my popover window and I am trying to set the click event function for the button. The click function show invoke my showBox(box) function which takes an argument box . How can I pass this box argument to the button inside the popover window? Here is the code I have now:

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

});

How can I bind a click event for my show_box_button and how can I make it invoke my showBox(box) function which takes an argument box ? Thanks!

Here is the jsfiddle link.

Answer 1

You can use the popover .on('shown.bs.popover'... event to add your click event to the current popover button

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

and then call your showBox function with the box_resources array adding the tabindex of the current element.

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