從彈出窗口訪問表格行

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