Question

我目前有一个按住按钮的bootstrap popover。仅当鼠标位于表tr上时，弹出窗口才会显示。

我想要做的是能够访问该行的元素，这是可能的。

Popover代码：

$('.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>

在行上实现popover的javascript：

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

有谁知道我在这里做错了什么以及我应该如何访问tr我正在盘旋的子元素？

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

Answer 1

出于某种原因，我无法让closest()正常工作。使用parent().parent()转到包含.popover分隔符，然后使用prev()获取前一个tr元素似乎可以解决问题。

只需改变：

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

要：

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

JSFiddle example

作为附注，当您的小提琴使用jQuery 1.10.1时，您应该将delegate()更改为on()：

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

Answer 2

Here我已修复它。您只需传递容器选项，其中为弹出窗口添加了弹出框元素

$('.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

在按钮单击提醒中，$（this）指的是按钮本身。在DOM层次结构中，popover html远远不在您的悬停tr。

向列表项添加处理程序以将其自身存储在全局变量中，并从click事件中访问该变量。请参阅分叉小提琴here。

首先我们声明一个全局（在最顶层）：

var hovered;

然后我们将鼠标悬停处理程序添加到列表项。请注意，使用“on”表示每个新生成的列表项也将接收此处理程序：

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

然后我们可以在按钮点击事件中提醒所需的数据：

alert(hovered.text());

Answer 4

点击此处 JS Fiddle

删除委托并使用id查找按钮并将其附加到单击处理程序，方法是使弹出窗口更容易跟踪它

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

还要注意

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

因为您在#shortcuts中使用了相同ID的popover中的按钮，我们无法先选择它，现在我们将其删除，我们可以

Answer 5

您的代码中已经有正确的元素。只需重复使用popover_parent变量，您就可以设置:) FIDDLE

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

或者你可以这样做：

$('.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');

我只是存储了#quickDeleteBtn中单击的元素，然后使用该链接。 FIDDLE HERE

从Popover访问表行

5 个答案: