Как отловить клик в js при использовании template?

Question

[T4-100]

Есть шаблон, который создается динамически

<script id="balloon-template" type="text/html">
    <div class="balloon-container">
        <div class="balloon-title">
            <%= title %>
        </div>
        <div class="balloon-content">
            <%= desc %>
        </div>
        <a href="#" class="icon-close popup-close js__close_balloon"></a>
    </div>
</script>

Когда пытаюсь отловить клик по классу js__close_balloon, ничего не происходит, т.к. этот элемент создается динамически
Пробовал через on и live, не получается отловить.

$('.js__close_balloon').on('click', function() {
    self.options.balloon.close();
    return false;
 });

Каким образом можно отловить событие?

Answer 1

[Сергей Наломенко]

Всё у Вас получится, только если Вы инициализируете обработчик $.on() в то время, когда элемент с таким классом уже присутствует в Вашем DOM (не в виде шаблона underscore где-то там, а уже реально рабочий объект).

То-есть, вначале Вы должны создать элемент(ы) на странице по шаблону, а затем уже инициализировать обработчик $.on()

Comments

[T4-100]

То есть это происходит, т.к. у меня скрипты подргуржаются выше, чем сама верстка template?

[Сергей Наломенко]

Нет. Это происходит потому, что у Вас изначально при отработке Вашего кода, на странице нет ни одного элемента созданного по этому шаблону. Поэтому коду $.on() не к чему биндить обработчик. Алгоритм следующий:
1) Создаёте экземпляр объекта по шаблону
2) Вызываете код инициализации обработчика

И так каждый раз при создании нового объекта по Вашему template.

Если неохота этим заниматься каждый раз — изучайте MVC фреймворки, например Backbone.js, где все стандартные обработчики, которые должны навешаться на элемент, прописываются в моделях, и нет необходимости каждый раз их инициализировать руками.

Answer 2

[eyeless_watcher]

Можно вешать обработчик на элемент, который уже есть на странице и до которого событие всплывет.

$(window).on("click", ".js__close_balloon", function(){});

Answer 3

[diavol]

Всегда можно старым-добрым дедовским способом:

<a href="#" class="icon-close popup-close js__close_balloon" onclick="..."></a>