Определение текста в элементе через jquery

Всем привет! Вопрос, собственно, в следующем:

Есть элемент с классом ".catalog__items__item", у него есть несколько дочерних элементов, один из них - h3

Я почему-то не могу найти именно h3 через jquery.

Вот код:

$(document).on('click', '.catalog__items__item', function(){
    $title = $(this).children('h3').text();
    alert($title);
});

При выборе всех дочерних элементов все проходит нормально, т.е.

$(document).on('click', '.catalog__items__item', function(){
    $title = $(this).children().text();
    alert($title);
});

Работает корректно, выводятся все элементы.

Скажите, пожалуйста, что я делаю не так с определением значения h3?

UPD:

Совсем забыл добавить html:

<div class="catalog__items__item" id="product">
    <h3>Сердечко с розами2</h3>
    <img src="../img/1.jpg" alt="продукт" width="200"
        height="150">
    <p class="size">Размер: на выбор</p>
    <p class="flowers">Количество цветов: 15-35</p>             
    <p class="price">Цена: от 1000 р</p>
    <div class="buttons">                   
        <a href="#popup_buy" class="buy popup">Купить</a>
    </div>