События JQuery не запускаются для элемента в шаблоне Dust.js

Question

Итак, я использую шаблон для обработки пыли, чтобы отобразить несколько элементов, а после визуализации шаблона событие jquery, которое я связал с одним из элементов, огонь. Шаблон Dust: связывание

<input type="number" id="numAmounts" value={numAmounts}> 

Jquery событие $ (документ) .ready:

$("#numAmounts").on("blur", updateModel); 

событие не срабатывает на всех, кто имеет какие-либо идеи, почему?

Answer 1

Похоже, что шаблон Dust.js визуализируется после DOM готов к работе. Это означает, что при выполнении вашей функции $(document).ready() не существует элемента с idnumAmounts, и никакой обработчик события не связан.

Одно решение, чтобы обойти это использовать event delegation:

$(document).on('blur', '#numAmounts', updateModel); 

Основной принцип заключается в том, что обработчик событий связан с элементом, который делает существует - в этом случае сам document - и ты укажите селектор для динамических элементов, которые будут присутствовать внутри него, чтобы вы реагировали на это событие. В идеале вы бы выбрали нечто более близкое к динамическим элементам в структуре HTML, чем весь документ.

В качестве альтернативного решения: Из краткого ознакомления с документом Dust, кажется, вы можете передать функцию обратного вызова функции render, которая будет выполнена после визуализации шаблона. Вы можете включить в это привязку обработчика статических событий, и должно быть безопасно предположить, что элемент будет существовать в этой точке. Взгляните на интерфейс Callback раздел Dust.js documentation.