События нажатия jQuery не запускаются в шаблонах AngularJS

36

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

Я использую jQuery 2.0.3 и AngularJS.

Если у меня есть якорь в index.html, например:

# index.html
<a href="#" class="clickme">Click Me</a>

<script type="text/javascript">
$(function() {
    $('.clickme').click(function() { console.log("click"); });
});
</script>

Затем он работает, и когда я нажимаю на него, он выводит 'click'. Но когда я помещаю это внутри шаблона, который я включаю с атрибутом ng-include, jQuery внезапно не срабатывает. Если я размещаю script внутри шаблона с привязкой, но он имеет огонь.

# index.html
<div ng-include="'path/to/template.html'"></div>

# template.html
<a href="#" class="clickme">Click Me</a>

<script type="text/javascript">
$(function() {
    $('.clickme').click(function() { console.log("click"); });
});
</script>

Это также относится к использованию директив, которые используют шаблоны. Это странно и вызывает у меня много хлопот с некоторыми выпадающими меню.

Кто-нибудь знает, почему это происходит?

  • 1
    Вероятно, что-то делать с DOM, не готовым во время привязки, НО, вы должны поместить все манипуляции с dom в директивы !!!!!
  • 0
    Вы можете поместить код на jsfiddle / plunker
Показать ещё 4 комментария
Теги:

1 ответ

85
Лучший ответ

Поскольку ваш clickme, вероятно, недоступен в DOM ready, скорее, он помещается в DOM на Angular при загрузке template.html - вам нужно использовать делегирование событий jQuery вместо использования .click:

$(document).on("click", ".clickme", function() {
  console.log("click");
});

Это обеспечит привязку jQuery к документу, а затем отслеживает любые события кликов на элементах с классом clickme.

Поделиться
  • 0
    Это работает, спасибо. Похоже, тема начальной загрузки, которую я использую, не была разработана для Angular. Я считаю, что я могу обновить его с этим, хотя. Спасибо!
  • 1
    Нет проблем. Селектор $(document) - это просто пример, лучше связать его с родительским элементом .clickme - очевидно, с тем, который не генерируется Angular :)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню