1

jinja2テンプレート内で動作するようにjqueryを少し取得しようとしています。予想される動作は、[すべて選択]ボックスをオンにすると、残りのボックスがチェックされることです。デバッグを開始するために.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 に答える