Why can't I make the bootstrap popover work at the table where I want it to work?

Question

I am trying to following the example here and create a popover table row. When I just copy the code it works like a charm. But in the table where I want the popup to work it fails.

I have the following JavaScript code (same as Fiddle):

// Popover

var options = { placement: 'bottom', trigger: 'manual', html: true, title: 'This row' };

function createPopover(element, args) {
    var href = $(element).data('popover-url'), txt = $(element).data('popover-content');
    var html = '<p>Challenge: Can you click the link in a popover?</p><p><a href="' + href 
+ '">' + txt + '</a></p>';

    $(element).data('content', html).popover(args);
}

function popoverPlacementBottom() {
    createPopover($(this), options);
}

$('.row').each(popoverPlacementBottom);

var insidePopover = false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function () {
        insidePopover = true;
    });
    $('.popover').on('mouseleave', function () {
        insidePopover = false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function () {
    var tr = $(this);
    setTimeout(function () {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function () {
    var tr = $(this);
    setTimeout(function () {
        if (!insidePopover) $(tr).popover('hide');
    }, 200);
});

and try to have popovers on this table:

<table class="table table-condensed scrollable popup">
<thead>
  <tbody id="logEvents">
    <tr class="row" data-popover-url="#url_for_row_1" data-popover-content="line 1" data-
         original-title="" title="">
      <td class="col-md-1">18:27</td>
      <td class="col-md-5">InfoService</td>
      <td>Blabla...</td>
     </tr>
  </tbody>
 </table>

This however, does not work. While it does work at the table underneath which looks like this:

<table class="popup">
<tbody>
  <tr class="row" data-popover-url="#url_for_row_1" data-popover-content="line 1" data-original-         title="" title="">
    <td>the first line</td>
  </tr>
  </tbody>
</table>

Why does it not work at the table where it should work? I hope someone can help me out.

/EDIT Okay I made my own Fiddle HERE .

Strangely enough the code works in the Fiddle. But on my webpage it does not. The only difference with the Fiddle is that the tr rows are dynamically generated everytime an event happens by the function:

return "<tr " + trClass + " data-popover-content='line 1' data-popover-url='#url_for_row_1'>"
                + "<td class='col-md-1'>" + time + "</td>"
                + "<td class='col-md-5'>" + item.Source + "</td>"
        +  "<td>" + item.DescriptionShort + "</td>"


               // + "<td class='col-md-6'>" + "<a id='pop' data-content='test' data-          
              toggle='popover'>" + item.DescriptionShort + "</a></td>"
                + "</tr>";

Could this have anything to do with it? (eg, that the id's and classes come after the document-ready? And that I need to reassign the classes every time a new event happens? And if so, how?

Answer 1

Okay the problem was in the generated code! The <tr> 's were generated everytime an event happened and so I should not assign the popover event only at document ready, but also everytime a new row was created.

I put the popover() function in his own pop namespace, and added the pop.popOver() after the new event made a new row. Looked as follows:

 this.addData = function (item) {
       var container = $(this.cId);
    container.append(this.getEventHtml(item));
    pop.popOver();
}

Now the popups show! YEAH! Thanks to Suman Bogati for his help.