Обработка события jQuery onClick на руле

Я хотел бы создать простое событие jQuery onClick, чтобы сделать динамический интерфейс пользователя в шаблоне рулей. Мне было интересно добавить addClass() после определенного щелчка.

рассмотрим HTML (сгенерированный ручками)

  {{#if hasButton}}
      <div id="container">      
          <button type="submit" class="myButton">Click me!</button>
      </div>
  {{/if}}

i.e: после щелчка по кнопке, его контейнер получит класс загрузки, который будет создавать взаимодействие с помощью CSS.

$(".myButton").on("click", function(event){
        $(this).parent().addClass("loading");
});

Этот код должен идти по моему шаблону handlebars или мне нужно переписать его в конкретный помощник для него? Есть ли какие-либо примеры, которые можно было бы предоставить, чтобы я мог изучить его, а затем разработать нечто подобное?

Спасибо заранее!

Ответ 1

Вы должны обновить своих JQuery-слушателей ПОСЛЕ вставки узлов в ваш DOM-код HTML.

var source   = "<li><a href="{{uri}}">{{label}}</a></li>";
var template = Handlebars.compile(source);
var context = {"uri":"http://example.com", "label":"my label"};
$("ul").append( template(context) );

// add your JQuery event listeners
$("li").click(function(){ alert("success"); });

Ответ 2

нет необходимости повторно привязывать обработчик событий к каждому динамическому обновлению DOM, если вы определяете их на уровне документа:

$(document).on('click','li',function(){
   alert( 'success' );
});

Надеюсь, это поможет!: -)

Ответ 3

Я не уверен, в чем проблема. Правильно, если вы сохраните свой JavaScript в файле *.js, perhaps, используя parent() вместо этого в prev() в этом конкретном случае.