1

案子：

我正在开发一个新的 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类事件page-link以在其他库中执行一些更改。由于添加的标记是动态的，我使用以下脚本来捕获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

问候。

4

1 回答 1

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

小提琴

于 2013-04-02T13:53:22.197 回答