0

次のコード スニペットが機能します。

<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>
<script type="text/javascript">
$($("#btnCapturePhoto").click(function captureImage() {
    alert('capture button clicked');
}));
</script>

このコードは機能しません:

<script type="text/javascript">
$($("#btnCapturePhoto").click(function captureImage() {
    alert('capture button clicked');
}));
</script>
<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>

なんで？スクリプト タグの配置と、それらが関連付けられている HTML タグとの関係がわかりません。場合によっては、HTML タグの上にスクリプト タグを配置し (JQueryIU 日付ピッカーなど)、そのスクリプトが次のように機能します。

<script type="text/javascript">
$(function() {
    $("#myinput").datepicker();
});
</script>
<input type="text" id="myinput" />

HTMLタグの上または下にコードを配置するタイミングを誰か説明してもらえますか?

4

4 に答える 4

1

上記の回答に同意しますが、問題を説明し、今後のアドバイスを提供していただけると助かると思います。

回答: ブラウザは HTML を上から下にロードするため、最初に JavaScript を実行します。JS が最初に読み込まれるため、探している要素はまだ読み込まれておらず、存在しません。これが失敗する理由です。

アドバイス: 通常、CSS を head にロードし、JS を body のタグの直前にロードすることをお勧めします。

<html>
<head>
    <!-- your CSS should go here -->
</head>
<body>
    <SomeElement></SomeElement>
    <SomeElement></SomeElement>
    <SomeElement></SomeElement>
<script type="text/javascript>
    //your javascript code
</script>
</body>
</html>

通常、これを行う理由は、JS コードを実行する前に DOM を準備できるようにするためです。これは、コードを実行する前に発生する必要がある ready イベントを回避できることを意味します。これはまた、ロードに時間がかかる可能性がある外部 JS ファイルがページに必要な場合、ユーザーがロードされる前に少なくとも DOM の一部を見ることができることを意味します。これは、かなり大きな単一ページのアプリケーションをロードしている場合に有利に働く可能性があります。このリンクには、Web ページのデザインに関する有益な情報が含まれており、HTML、CSS、および JS を学習する過程で役立つ可能性があります。http://developer.yahoo.com/performance/rules.html

于 2013-03-21T04:15:00.537 に答える
1

動作しない例では、jQuery コードは を見つけようとします#btnCapturePhotoが、

<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>

ソース ファイルの jQuery コードの後に​​リストされているため、DOM にはまだ存在しません。

フォームの使用:

$(function() {
    $("#myinput").datepicker();
});

jQuery コードを実行する前に DOM が完全に読み込まれるようにするため、ID が実際に見つかります。 $(function()...ドキュメントの準備ができたときに実行されます。

于 2013-03-21T02:50:25.460 に答える
1

すべてのスクリプトを外部の .js ファイルに配置し、jQuery の後に HTML の下部にロードする必要があります。

しかし、特定のコードが機能している理由と機能していない理由を見てみましょう。

<a id="btnCapturePhoto" data-role="button" href="#page1">Capture Photo</a>
<script type="text/javascript">
$($("#btnCapturePhoto").click(function captureImage() {
    alert('capture button clicked');
}));
</script>

これ#btnCapturePhotoは、スクリプトの実行時に要素が存在するために機能します。

<script type="text/javascript">
$(function() {
    $("#myinput").datepicker();
});
</script>
<input type="text" id="myinput" />

これが機能するのは、スクリプトを簡単なドキュメント対応ハンドラー内にラップしているためです (これが$(function(){..この部分です)。

于 2013-03-21T02:50:41.183 に答える
0

最初の2つの例では、スクリプトが読み込まれた直後に、アンカーのクリックイベントにハンドラーをバインドしています。最初の例は、スクリプトが参照しているアンカーがスクリプトの直前にロードされているために機能します。

2番目の例では、スクリプトがアンカーを選択しようとした後にアンカーがロードされるため、何も見つからず、ハンドラーはクリックイベントにバインドされません。

3番目の例では、を使用しています。$(function() { ...これは、と同等$(document).ready(function() {...です。これは、DOMが完全にロードされるまで（つまり、ページ上のすべてのHTMLがJavascriptエンジンによって登録されるまで）待機してから、ハンドラーでスクリプトを実行します。

于 2013-03-21T02:56:09.813 に答える