2013-04-02 27 views
1

案後:jQuery的:獲取參考父元素被替換

我上一個新的jQuery照相館工作。目前我正在合併三個不同的庫並編寫一些自定義代碼來擴展庫的功能。但是我在過去的2個小時裏被困在這段腳本中,無法想象通過。

在其中一個庫中有一段腳本將一些標記附加到body。這是添加的標記。

<div class='custom' data-oid=1> 
    <div class='page-link' data-attr=1>Page Link</div> 
    <div class='page-link' data-attr=2>Page Link</div> 
</div> 
<div class='custom' data-oid=2> 
    <div class='page-link' data-attr=1>Page Link</div> 
    <div class='page-link' data-attr=2>Page Link</div> 
</div> 

我要聽page-linkclick事件進行其他圖書館的一些變化。由於添加的標記是動態的,我使用以下腳本來捕獲click事件。

$(document).on('click', '.page-link', function() { 
    //Print value of parent data attribute 
    alert($(this).parent().attr('data-oid')); 
}); 

問題:

它應該工作的權利。但問題是添加標記的庫也在監聽click事件。一旦我點擊page-link,庫將用另一個元素替換點擊的元素。由於這個點擊的元素隨着它的範圍而丟失,並且我的代碼中的.parent()無法獲得父級。

所以我的問題是:即使在範圍丟失後,是否有辦法獲得父級的屬性值data-oid

jsFiddle

問候。

回答

0

由於事件冒泡,您可以點擊處理程序附加到父,和做自己的支票羯羊或不是目標是.page-link

$(document).on('click', '.custom', function (e) { 
    if ($(e.target).hasClass('page-link')) { 
     $(e.target).replaceWith('<h2>Link Modified</h2>'); 
     alert($(this).attr('data-oid')); 
    } 
}); 

FIDDLE