Accessing Table Row From Popover

Question

I currently have a bootstrap popover holding a button. The popover shows only when the mouse is over a table's tr.

What I want to do is to be able to access the elements for that row, is this possible.

Popover code:

$('.popup').popover(
    {
      placement: 'top',
      trigger: 'manual',
      delay: { show: 350, hide: 100 },
      html: true,
      content: $('#shortcuts').html(),
      title: "Quick Tasks"
    }
  ).parent().delegate('#quickDeleteBtn', 'click', function() {
      alert($(this).closest('tr').children('td').text()); // ???
});
    var timer,
        popover_parent;
    function hidePopover(elem) {
        $(elem).popover('hide');
    }
    $('.popup').hover(
        function() {
          var self = this;
          clearTimeout(timer);
          $('.popover').hide(); //Hide any open popovers on other elements.
          popover_parent = self
          //$('.popup').attr("data-content","WOOHOOOO!");
          $(self).popover('show');            
        }, 
        function() {
          var self = this;
          timer = setTimeout(function(){hidePopover(self)},250);                 
    });
    $(document).on({
      mouseenter: function() {
        clearTimeout(timer);
      },
      mouseleave: function() {
        var self = this;
        timer = setTimeout(function(){hidePopover(popover_parent)},250); 
      }
    }, '.popover');

HTML:

<div class="hide" id="shortcuts">
    <a href="javascript:void(0);" id="quickDeleteBtn" class="btn btn-danger">Delete</a>
    </div>

javascript that implements popover on row:

rows += '<tr class="popup datarow" rel="popover">';

Does anyone know what I'm doing wrong here and how I am supposed to access the child elements of the tr I'm hovering over?

JSFiddle: http://jsfiddle.net/C5BjY/8/

Answer 1

For some reason I couldn't get closest() to work as it should. Using parent().parent() to get to the containing .popover divider, then using prev() to get the previous tr element seems to do the trick however.

Just change:

alert($(this).closest('tr').children('td').text());

To:

alert($(this).parent().parent().prev('tr').children('td').text());

JSFiddle example.

---

As a side note, as your Fiddle uses jQuery 1.10.1 you should change delegate() to on():

on('click', '#quickDeleteBtn', function(index) { ... });

Answer 2

Here I have fixed it. You just have to pass the container option in which the popover element is added for the popover

$('.popup').each(function (index) {
    console.log(index + ": " + $(this).text());
    $(this).popover({
        placement: 'top',
        trigger: 'manual',
        delay: {
            show: 350,
            hide: 100
        },
        html: true,
        content: $('#shortcuts').html(),
        title: "Quick Tasks",
        container: '#' + this.id
    });
});