我在我的模板的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)中就可以了! 错误在哪里?
答案 0 :(得分:2)
是的,这会导致它。并且,delegated binding通常是解决方案。div#框通过单击按钮加载Ajax调用,然后在加载之前它不存在。这是问题吗?
之所以这样,是因为jQuery只能将事件绑定到当时存在的元素。但是,由于几乎所有事件都在target
的.parents()
中传播/传播,因此可以使用现有父级代表预期的后代。
$(document).on 'click', '#box', ->
# ...
在这种情况下,document
是现有父级,允许#box
在DOM存在之前为其创建click
绑定。
否则,事件的绑定可能会延迟,直到元素存在。这就是问题的最后部分所发生的情况,因为<script>
与<div>
一起插入到DOM中。