javascript - 如何访问 jQuery .on() 的 "first"选择器？

Question

我正在尝试的是，拥有这个脚本:

$('[data-foo]').on('click', '.button-action', function() {
    // Show alert on $('.button-action', this).
    // Alert message: Lorem ipsum {$('.foo-id', this).text()}
});

我有多个这样的元素，它们是动态生成的:

<div data-foo="{id}>
    <div class="foo-id">
        Lorem Value
    </div>
    <button class="button-action">Click to show the id of this data-foo</button>
</div>

换句话说，我想访问我单击的this按钮的$('[data-foo]')。

Answer 1

您可以使用event.delegateTarget访问处理程序附加到的元素(在本例中为 [data-foo]):

$('[data-foo]').on('click', '.button-action', function(event) {
    console.log($(event.delegateTarget).find('.foo-id').text());
});

但是，如果您总是想获取 foo-id 并且它始终是前一个同级，您也可以使用 .prev() :

console.log($(this).prev().text());