从弹出窗口访问表格行

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
    });
});

Answer 3

In your button click alert, $(this) refers to the button itself. In the DOM hierarchy, the popover html is nowhere near your hovered tr.

Add a handler to the list item to store itself in a global variable and access that from the click event. See the forked fiddle here .

First we declare a global (at the very top):

var hovered;

Then we add a mouseover handler to the list item. Note that using 'on' means every newly generated list item will also receive this handler:

$('body').on('mouseover', '.popup', function() {
      hovered = $(this);   
 });

Then we can alert the needed data from within the button click event:

alert(hovered.text());

Answer 4

See here JS Fiddle

by removing the delegate and using the id to find the button and attaching it to a click handler by making the popover makes it easier to track it

$(self).popover('show');
$('#quickDeleteBtn').click(function(){
    alert($(self).text());
});

also note

$('#shortcuts').remove();

because you were using the button in the popover with the same ID in the #shortcuts we couldn't select it first, now we remove it we can

Answer 5

You already have the correct element in your code. Just reuse the popover_parent variable and you are all set :) FIDDLE

alert($(popover_parent).text());

Or you could do something around like this :

$('.popup').hover(

    function () {
        var self = this;
        clearTimeout(timer);
        $('.popover').hide(); //Hide any open popovers on other elements.
        $('#quickDeleteBtn').data('target', '');
        popover_parent = self;

        //$('.popup').attr("data-content","WOOHOOOO!");
        $('#quickDeleteBtn').data('target', $(self));
        $(self).popover('show');

    },

    function () {
        var self = this;
        timer = setTimeout(function () {
            $('#quickDeleteBtn').data('target', '');
            hidePopover(self)
        }, 250);
    });
    $(document).on({
        mouseenter: function () {
            clearTimeout(timer);
        },
        mouseleave: function () {
            var self = this;
            timer = setTimeout(function () {
                $('#quickDeleteBtn').data('target', '');
                hidePopover(popover_parent)
            }, 250);
        }
    }, '.popover');

I just store the element clicked in your #quickDeleteBtn then use the link. FIDDLE HERE