JS-скрипт работает только тогда, когда он встроен в код scala / html

Question

JS-скрипт работает только тогда, когда он встроен в код scala / html

0

У меня такой div в файле scala.html моего шаблона (я использую PlayFramework):

<div id="box">Text in the box</div>

и этот сценарий кофе:

$("#box").on "click", -> 
    $("#box").fadeOut()

Это не работает: если я нажму на div #box, ничего не произойдет. Я пытаюсь использовать простой jquery, чтобы понять, если это проблема с кофе или нет. Затем я поместил тот же сценарий jQuery в <head>:

<script>
$("#box").on("click", function() {
    return $("#box").fadeOut();
 });
</script>

и не работает снова, но если я поместил его в файл scala.html (который содержит div #box), он работает! Где ошибка?

Fred K 18 окт. 2013, в 11:39

Источник

0

Привет @JonathanLonowski, да, я пробовал с и без $(document).ready(function() {... В консоли нет ошибок.
Fred K 18 окт. 2013, в 09:41
0

В html есть только один #box, но я попытался изменить его на другое имя, и оно то же самое. С console.log консоль говорит «Running» и «0» для .lenght
Fred K 18 окт. 2013, в 09:53
0

С $ -> вверху Coffee (над двумя console.log), это то же самое. Консоль снова говорит «Бег» и «0»!
Fred K 18 окт. 2013, в 10:03
0

Помогает ли делегированное связывание? $(document).on 'click', '#box', -> ...
Jonathan Lonowski 18 окт. 2013, в 10:05
0

@JonathanLonowski: хорошо, последний код работает! Теперь я думаю, что проблема, вероятно, заключается в следующем: поле div # загружается с помощью вызова Ajax нажатием кнопки, а затем перед загрузкой его не существует. Это проблема? И тогда как правильно сделать так, чтобы это работало?
Fred K 18 окт. 2013, в 11:25

Показать ещё 3 комментария

Теги:

javascript

jquery

scala

coffeescript

playframework-2.1

1 ответ

Ещё вопросы

Привет @JonathanLonowski, да, я пробовал с и без $(document).ready(function() {... В консоли нет ошибок.
В html есть только один #box, но я попытался изменить его на другое имя, и оно то же самое. С console.log консоль говорит «Running» и «0» для .lenght
С $ -> вверху Coffee (над двумя console.log), это то же самое. Консоль снова говорит «Бег» и «0»!
Помогает ли делегированное связывание? $(document).on 'click', '#box', -> ...
@JonathanLonowski: хорошо, последний код работает! Теперь я думаю, что проблема, вероятно, заключается в следующем: поле div # загружается с помощью вызова Ajax нажатием кнопки, а затем перед загрузкой его не существует. Это проблема? И тогда как правильно сделать так, чтобы это работало?

Jonathan Lonowski · Accepted Answer · 2013-10-18T09-24-00.000Z

поле div # загружается вызовом Ajax, нажав кнопку, а затем перед загрузкой его не существует. Это проблема?

Да, это вызовет это. И делегированное связывание, как правило, является решением.

Причина этого в том, что jQuery может привязывать события только к элементам, которые существуют в данный момент. Но, поскольку почти все события пузырь/распространяются через target .parents(), существующий родитель может использоваться для представления предполагаемого потомка.

$(document).on 'click', '#box', ->
  # ...

В этом случае document является существующим родителем, позволяя #box иметь привязку click созданную для него до его существования в DOM.

В противном случае привязка события может быть отложена до тех пор, пока элемент не будет существовать. Это то, что происходит для последней части вашего вопроса, так как <script> вставляется в DOM вместе с <div>.