Question

案例：

我正在开发一个新的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>

我想听取类click的{{1}}事件，以便在其他库中执行某些更改。由于添加的标记是动态的，我使用以下脚本来捕获page-link事件。

click

问题：

它应该正常工作。但问题是添加标记的库也在监听$(document).on('click', '.page-link', function () { //Print value of parent data attribute alert($(this).parent().attr('data-oid')); });事件。一旦我点击click，库就会用另一个元素替换被点击的元素。因此，点击的元素及其范围将丢失，我的代码中的page-link无法获取父级。

所以我的问题是：即使在范围丢失后，有没有办法获得父亲的attr .parent()的值？

jsFiddle

问候。

Answer 1

当事件冒泡时，您可以将点击处理程序附加到父级，并自行检查目标是否为.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

jQuery：替换元素后获取对父级的引用

1 个答案: