javascript - 如何监听点击事件并在点击时找到父div？

Question

如果我有这样的html

<div class="col-xs-3">
    <h2>A</h2>
    <div class="abc">
        <div class="def"><a class="btn"></a></div>
        <h3>B</h3>
        <p><a class="btn">C</a></p>
    </div>
</div>

如何监听 <a class="btn">C</a> 上的点击事件然后找到 <h2>A</h2> 的值(一)？

这是我的尝试

$(document).on('click', '.btn', function (event) {
    var btn = event.target, container;
    container = $(btn).closest('h2');
    window.console.log(container);
    event.preventDefault();
});

Answer 1

$('.btn').on('click', function() {
  alert( $(this).closest('.abc').prev().text() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
    <h2>A</h2>
    <div class="abc">
        <div class="close"><a class="btn"></a></div>
        <h3>B</h3>
        <p><a class="btn">C</a></p>
    </div>
</div>