Question

我正试图在jinja2模板中使用一些jquery。预期的行为是检查SelectAll框将检查其余的框。我已经向.change事件添加了警报以开始调试，我发现它没有运行。所以脚本实际上从未被调用过。

我做错了什么？

{% extends "layout.html" %}
{% block head %}<head>
{% block title %}Home{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(':checkbox[name=selectAll]').change (function () {
    $(':checkbox[name=instances]').prop('checked', this.checked);
    alert("FOO");
});
</script>
</head>
{% endblock %}
{% block body %}

<form target="" method="GET" id="testform">
<div>
Select All: <input type="checkbox" name="selectAll" id="selectAllInstances" /> <br />
    {% for k in tests %}
    <input type="checkbox" name="instances" value="{{ k[1].mongo_id }}">{{ k[0] }} <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Description: {{ k[1].__doc__ }} <br />
    {% endfor %}
</div>
    <br />
    <br />
    <input type="submit">
</form>
{% endblock %}

Answer 1

模板是红鲱鱼。在将事件处理程序绑定到它们的脚本运行时，您的复选框不存在。

您有几个选择。

在复选框
将脚本包装在函数中并延迟调用它直到稍后（例如使用document.ready事件）。
使用event delegation代替直接绑定。

Answer 2

你需要在document.ready中包装jquery。

$(function(){
   $(':checkbox[name=selectAll]').change (function () {
    $(':checkbox[name=instances]').prop('checked', this.checked);
    alert("FOO");
   });
});

没有它，脚本在DOM元素准备好遍历之前运行

注：

$(function(){...code here ...});

是

的简写

$(document).ready(function(){
//your code
});

Answer 3

此行执行时：

$(':checkbox[name=selectAll]').change(...);

没有名为selectAll的复选框 - 它在脚本下面定义。将代码包装在.ready事件中：

$(document).ready(function(){
});

完全构建DOM层次结构时会触发事件（简单来说，当浏览器看到</html>时）。

为什么这个javascript不执行？

3 个答案: