从弹出窗口访问表格行

Question

我目前有一个持有按钮的引导弹出窗口。弹出窗口仅在鼠标位于表格的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> 

的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

在你点击按钮警报，$（这）是指按钮本身。在DOM层次结构中，弹出式html不存在于你的hover tr附近。

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

首先声明一个全球性的（最顶层）：

var hovered; 

然后我们添加一个鼠标悬停处理程序列表项。需要注意的是“上”使用意味着每个新生成的列表项目仍然会收到此处理程序：

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

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

alert(hovered.text()); 

Answer 3

看到这里JS Fiddle

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

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

也注意到

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

，因为你是在与在#shortcuts相同ID的酥料饼的使用按钮，我们不能首先选择它，现在我们将其删除，我们可以

Answer 4

你您的代码中已经有了正确的元素。只是重用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

Answer 5

​​我修好了。 你只需要通过在其中酥料饼的元素是酥料饼

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