Как предварительно добавить прослушиватель событий JavaScript к элементам, созданным с помощью Mustache?

Question

предположим, у меня есть этот шаблон:

<script type="text/html" id="list_tpl">
<ul>
{{#list}}
    <li><input value="{{ name }}" /><a href="javascript:void(0);">delete</a></li>
{{/list}}
</ul> 
</script>  

рендер:

Mustache.to_html(document.getElementById("list_tpl").innerHTML), {
    "list": [
        {"name": "a1"},
        {"name": "a2"},
        {"name": "a3"}
    ]
});

Я бы хотел связать событие, когда при нажатии на ссылку delete в каждом <li> эта <li> удаляется из DOM.
Я знаю, что могу связать событие после завершения рендеринга, но, поскольку рендеринг будет выполняться несколько раз (каждый раз, когда пользователь нажимает кнопку), я не хочу связывать его каждый раз.
Как это сделать красиво?

Answer 1

Я не уверен, как это сделать с простым javascript, но Jquery имеет .live() http://api.jquery.com/live/

с этого веб-сайта: «Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем. "

Это именно то, что вы просите.

Вот немного информации о том, как это сделать в простом javascript: jQuery live () в простом JavaScript?

hth,

Answer 2

Для тех, кто нашел эту тему после поиска в Google и все еще ищет ответ: вы можете использовать jQuery для управления делегированием с помощью метода "on".

Начиная с jQuery 3.0, как делегатные, так и живые методы устарели.

В jQuery docs предлагается использовать метод "on" вместо методов делегата и live, есть еще одна тема для использования метода "on" с будущими элементами: jQuery .on функция для будущих элементов, поскольку .live устарела