2013-07-09 2 views
13

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

рассмотреть HTML (генерируемый рулями)

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

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

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

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

Заранее благодарен!

+0

Вы должны хранить 'html',' css' и 'js' отделенные друг от друга. Если вы создаете что-то из шаблона, вы должны знать, какие действия должны выполняться в шаблоне. (либо потому, что вы отправляете эту информацию с шаблоном с сервера), либо потому, что вы уже знаете в своем коде. Поэтому либо зарегистрируйте «обратные вызовы» для своего события после добавления шаблона, либо вы будете использовать [delegate] (http://api.jquery.com/on/#direct-and-delegated-events) для событий (что-то вроде: '$ (containerWhereYouAddThetemplateTo) .on (" click "," .myButton ", function() {})'; –

ответ

13

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

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"); }); 
0

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

+0

Проблема в том, что событие не запускается, потому что добавление jQuery просто не работает (этот код действительно идет на рулевом шаблоне не внешний js). (btw i изменен с prev() на parent() для лучшей читаемости кода) – Hal

38

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

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

Надеется, что это помогает! :-)

+0

вот как это делается в современном веб-приложении! – ProblemsOfSumit

+2

Word. Сделайте это так. как можно меньше, подставляя «документ» для ближайшего рендерируемого узла, например, div, который вы отобрали в шаблоне руля. –

Смежные вопросы