JS脚本只有在嵌入到scala / html代码中时才有效

JS script works only when embedded in scala/html code

本文关键字：代码 html 有效 scala 脚本 JS      更新时间：2023-09-26

我在模板的scala.html文件中有一个这样的div（我正在使用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）中，它可以工作！错误在哪里？

div#box 通过单击按钮加载 Ajax 调用，然后在加载之前不存在。是问题所在吗？

是的，这会导致它。而且，委托绑定通常是解决方案。

这是因为jQuery只能将事件绑定到当时存在的元素。但是，由于几乎所有的事件都通过target的.parents()冒泡/传播，现有的父代可以用来表示预期的后代。

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

在这种情况下，document 是现有的父级，允许#box在 DOM 中存在之前为其创建click绑定。

否则，事件的绑定可能会延迟到元素存在。这就是您问题的最后一部分发生的情况，因为<script>与<div>一起插入 DOM 中。

相关文章：