11

私は jQuery と Web 開発を学んでいる初心者なので、これはばかげた質問かもしれませんが、Google でこれに対する答えを見つけることができません (おそらく、適切なキーワードを検索していないのでしょう)。簡単な HTML ファイル (jQuery をロードする「test.html」など) と、私が作成した外部 JavaScript ファイル (「test.js」など) があり、その中にボタンがあります。たとえば、

<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="scripts/test.js" type="text/javascript"></script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>

「test.js」には、次のものがあります。

$( "#my_button" ).click(function() {
    alert('test');
    return false;
});

しかし、ボタンをクリックしても機能しません。ただし、「test.js」の内容を「test.html」に入れると、次のようになります。

<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $( "#my_button" ).click(function() {
        alert('test');
        return false;
    });
});
</script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>

できます。最初の質問は、コードを外部ファイルに挿入してロードすると機能する理由を説明してもらえますか? jQueryコードを動作させるには、常にjQueryコードをラップする必要があり$(function() {......}ますか?

理想的には、HTML テンプレートに JavaScript コードを入れたくないのです。関連/2番目の質問: 上記のようにjavascript/jQueryコードを分離し、意図したHTMLテンプレートで機能させるための最もクリーンで最良の方法は何ですか?

ご回答ありがとうございます。

4

4 に答える 4

13 
$(document).ready(function() {

    $( "#my_button" ).click(function() {
        alert('test');
        return false;
    });

});
于 2013-07-11T18:01:40.290 に答える
10

クリック関数を機能させるには、 $(function() { ... }) が必要です。ドキュメントが読み込まれ、DOM での作業を開始できることを jquery に伝えます。それまでは、DOM の準備ができておらず、要素が存在しない可能性があります。

編集： より高度で、いつ使用しないかを知っていない限り、これを外部ファイルにも使用してください。

于 2013-07-11T18:01:22.947 に答える
1

jquery でのイベント バインディングを機能させるには、レンダリング済みの HTML オブジェクトが必要です。

あなたが言うなら、動作するには HTML に既に存在している$('#button').click(function(){dosomething()}); 必要があります。#button

使用する場合$(function(){}); コードは、コードを実行する準備完了イベントを文書化するのを待ちます。したがって、間違った時間に button.click を呼び出すと、ボタンが見つからず、機能しません。

于 2013-07-11T18:02:18.800 に答える