3

我目前有一个带有按钮的引导弹出窗口。仅当鼠标悬停在表格上时才会显示弹出框tr。

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

弹出框代码：

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

4

5 回答 5

4

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

只是改变：

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

至：

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

JSFiddle 示例。

附带说明一下，当您的 Fiddle 使用 jQuery 1.10.1 时，您应该更改delegate()为on()：

on('click', '#quickDeleteBtn', function(index) { ... });
于 2013-06-03T08:31:08.077 回答
1

在这里我已经修复了它。您只需要传递容器选项，其中为弹出框添加了弹出框元素

$('.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
    });
});
于 2013-06-03T09:26:58.417 回答
0

在您的按钮单击警报中， $(this) 指的是按钮本身。在 DOM 层次结构中，popover html 与悬停的 tr 相去甚远。

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

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

var hovered;

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

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

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

alert(hovered.text());
于 2013-06-03T08:38:38.423 回答
0

在这里看到JS Fiddle

通过删除委托并使用 id 来查找按钮并将其附加到单击处理程序 通过使弹出框更容易跟踪它

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

还要注意

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

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

于 2013-06-03T08:39:11.987 回答
0

您的代码中已经有了正确的元素。只需重用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 中，然后使用该链接。 在这里提琴

于 2013-06-03T09:01:48.087 回答