Question

I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent ‘OpenRecent’ method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?

<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
        <li>
            <div>
                <input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
                                                                          checked: $root.ItemsSelected"/>
                <a href="#"
                   data-bind="text: $data.Description + '-' + $data.County,
                              attr: 
                              { 
                                id: $data.TransId,
                                'data-title': $data.Description
                              },
                              click: $root.OpenRecent"
                   data-trigger="hover"
                   rel="popover"
                   data-html="true"
                   data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
                                 <a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
                                 <a data-bind='click: $parent.Email'>Email</a> |
                                 <a data-bind='click: $parent.SaveToPDF'>PDF</a> |
                                 <a data-bind='click: $parent.SavetToCSV'>CSV</a>">
                </a>
            </div>
        </li>
    </ul>

Answer 1

The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.

One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.

$("ul").on("click", ".print", function(event) {
     var context = ko.contextFor(this);
     context.$root.Print(context.$data);
     event.preventDefault();
});

I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.

Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/