1

我正在尝试让一些 jquery 在 jinja2 模板中工作。预期的行为是选中 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 %}
4

3 回答 3

3

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

你有几个选择。

  • 将脚本元素移动到 HTML 中复选框之后的某个点
  • 将脚本包装在一个函数中并延迟调用它直到稍后（例如使用 document.ready 事件）。
  • 使用事件委托而不是直接绑定。
于 2013-01-11T20:43:01.873 回答
2

您需要将 jquery 包装在 document.ready 中，即

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

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

笔记：

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

是简写

$(document).ready(function(){
//your code
});
于 2013-01-11T20:45:05.300 回答
1

到此行执行时：

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

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

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

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

于 2013-01-11T20:47:14.367 回答