JS脚本仅在嵌入scala / html代码时才有效

时间:2013-10-18 09:29:30

标签: javascript jquery scala coffeescript playframework-2.1

我在我的模板的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)中就可以了! 错误在哪里?

1 个答案:

答案 0 :(得分:2)

  

div#框通过单击按钮加载Ajax调用,然后在加载之前它不存在。这是问题吗?

是的,这会导致它。并且,delegated binding通常是解决方案。

之所以这样,是因为jQuery只能将事件绑定到当时存在的元素。但是,由于几乎所有事件都在target.parents()中传播/传播,因此可以使用现有父级代表预期的后代。

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

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

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