How to trigger dynamically created bootstrap popover with jquery

Question

I have a html table with a row that looks like:

<tr>
    <td><input type="checkbox" name="check[]" value="265"></td>   
    <td>265</td>
    <td>NO MATCH</td>
    <td>https://stackoverflow.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>

I am trying to build a jquery function that will dynamically create (if it doesn't already exist) and open up a bootstrap 2.32 popover if I pass it over a URL in table cell. So far I have:

       $('td').on('mouseover', function(e) {
            var contents = $( this ).html() ;

            if (contents.match("^http")) {
                console.log(contents);

                 this.innerHTML = '<a href="myreference.html" data-bind="popover"' + ' data-content="'+contents +'"> link </a>';
                 console.log(this.innerHTML);

            };

            // Trigger the popover to open
            console.log(this.innerHTML );
            $(this.innerHTML ).popover("show");


        });

The popover portion of this is based on http://jsfiddle.net/8DP4T/1/

When I mouseover a url in the table it forms a popover link as expected, that looks like:

<a href="myreference.html" data-bind="popover" data-content="https://stackoverflow.com/"> link </a>

However as I hold the mouse over it no popup occurs.

Interestingly , I have also placed

<a href="myreference.html" data-bind="popover" data-content="https://stackoverflow.com/">Brick</a> 

below my table and this is working with a popover created.

this appears to be a known problem with questions such as Twitter Bootstrap Popovers not working for Dynamically Generated Content . How can I get this working in my case?

Answer 1

You aren't creating a proper selector to bind the popover to.

When you have:

$(this.innerHTML ).popover("show");

It is the same as writing

$('<a href="myreference.html" ....</a>').popover("show");

jQuery has no way to match that string to any DOM element(s). That string is not in the DOM.

You need to use a proper selector and traverse to target like:

 $(this).find('a');

Alternatively had you created a jQuery object from the string, and used a jQuery method like html() to insert it you could have used the newly formed jQuery object to bind plugin to after the jQuery object is inserted

var $link = $('<a href="myreference.html" ....</a>');
$(this).html($link);
$link.popover("show");