0

ボックス内の文字を数える次のjqueryスクリプトがあります

$('#myfield').keyup(function () {
    var left = 250 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('put: ' + left);
});

このコードをフィールドの直後に配置すると機能しますが、これを js ファイルに外部化したいので、これを myscript.js にコピーしてから、次のようにします。

 <script language="JavaScript" type="text/javascript" src="script/myscript.js"></script>

そしてそれは機能します...問題は、フィールドの後の同じ場所(ページの下部にあります)で宣言した場合にのみ、myscript.jsへのこの呼び出しが機能することです..しかし、私はそれを上部に含めたいです他のすべての js 呼び出しでは、「'null' is null or not an object」が表示されるため、これは機能しません。

それで、ドキュメントの準備ができてそれを囲んでみましたが、エラーは発生しませんが、..関数が実行されていないようです。

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

助言がありますか？

4

3 に答える 3

1

あなたが直面している問題は、コードが HTML ファイルにある場合、フィールドがレンダリングされた後に実行されますが、コードがファイルにある場合、これはもはや当てはまりません。

keyupしたがって、これを修正するには、フィールドが DOM に挿入されたことを確認してからイベントを設定する必要があります。

$(document).ready()通常、これは次のようにイベントのハンドラーでコードを囲むことによって行われます。

$(document).ready(function(){
    $('#myfield').keyup(function () { // note #myfield instead of $myfield
        var left = 250 - $(this).val().length;
        if (left < 0) {
            left = 0;
        }
        $('#counter').text('put: ' + left);
    });
});

これにより、ドキュメント内のすべての要素がレンダリングされた後にコードが実行され、それらを操作できるようになります。

ready()の jQuery ドキュメントも参照してください。

于 2013-04-10T14:04:49.043 に答える
1

セレクターは$('#myfield')ではなくである必要があり$('$myfield')ます。そして、それをドキュメントレディ機能に保管してください。

編集：

外部 JS ファイルにあるか、同じファイルにあるかは、違いはありません。そのコードが含まれる配置は違いを生みます。私は通常、すべての JS スクリプトを<head>. $(function() { ... });DOM がロードされる前に実行されないようにラップする必要があります。

この jsFiddleを見てください。左フレームのドロップダウンを onDomready/onLoad/No wrap - head/No wrap - body の間で変更すると、コードが機能するかどうかが変わることに注意してください。onDomready に設定すると、結果のコードは次のようになり、動作します。

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> - jsFiddle demo</title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <script type="text/javascript">
        $(function(){
            $('#myfield').keyup(function () {
                var left = 250 - $(this).val().length;
                if (left < 0) {
                    left = 0;
                }
                $('#counter').text('put: ' + left);
            });
        });
        </script>
    </head>
    <body>
        <input type="text" id="myfield">
        <p id="counter">put: 246</p>
    </body>
</html>

この例では、JS コードが直接 head にある場合と、外部の JS ファイルにある場合に違いはないことに注意してください。その<script>タグを、同じ JS コードを持つ外部インクルードに置き換えて、同じ場所に残した場合、まったく同じように機能します。

それでも問題が解決しない場合は、問題を示す独自の jsFiddle を作成することをお勧めします。

于 2013-04-10T14:03:49.780 に答える
0
  1. #myfield だと思います
  2. 一番下にjavascriptをロードすることは常に良いです

  3. それは

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

于 2013-04-10T14:05:33.193 に答える