0

$()以下のスクリプトから 2 つの aka ready ハンドラーを削除することは可能ですか? DOM の準備が整う前に jquery をロードしたいのですが、#certification.

    $(function(){
           $("#certification").multiselect({
               minWidth: "500",
               noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
               selectedText: function(numChecked, numTotal, checkedItems){
                   return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
               }
           });
    });

編集:上記のスクリプトの前に #certification が表示されると仮定してください ( 内<head>)。DOM 全体の準備が整う前に、スクリプトから #certification を参照したいと思います。$ ready ハンドラーなしでこれを行うことは可能ですか?

EDIT2：上記がにあると仮定してください<head>

解決策:いただいたアドバイスにより、問題を解決することができました。$(function(){}) レディ ハンドラーが削除され、jquery の前に #certification 要素が表示されました。#certification 要素と jquery の両方が から に移動されまし<head>た<body>。意図したとおり、残りの DOM の準備が整う前に jquery が表示されるようになりました。回答ありがとうございます。

4

6 に答える 6

5

要素を選択するには、その#certification要素が存在する必要があります。要素の定義の後にスクリプトを配置して問題ないはずです。

わかった：

<script>
    $(function(){
        $('#certification').whatever();
    });
</script>
<div id="certification"></div>

良くないですよ：

<script>
    $('#certification').whatever();
</script>
<div id="certification"></div>

わかった：

<div id="certification"></div>
<script>
    $('#certification').whatever();
</script>
于 2013-10-10T20:42:56.980 に答える
2

それはあなたがやろうとしていることによって異なりますが、もう少しコンテキストが役立ちます。ただし、head セクションにその JS スニペットがある場合 (「DOM ロード前」に基づいて配置したい場所であると想定しています)、#certification は ID を持つ DOM 要素を参照するため、存在しません。 '認証'。

あなたがやろうとしていることについての正確な情報は、より良いアドバイスに役立ちます。

私がお勧めするのは、ブロックを関数にして、それを DOM で呼び出すことです。

function doMultiSelect(elem) {
  elem.multiselect({
     minWidth: "500",
     noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
     selectedText: function(numChecked, numTotal, checkedItems){
     return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
    }
 });
}

そして、DOMの準備ができてそれを呼び出すことができます

$(function() {
  doMultiSelect($("#certification"));
});

私はちょうどあなたの説明を見ました。行う：

<div id="certification""></div>
<script> $("#certification").multiselect.......</script>

それはうまくいくはずです

于 2013-10-10T20:47:48.187 に答える
2

いいえ、あなたがすることはできません。DOM の準備が整うまで、要素は使用できません。または、コード内の要素の後にスクリプトを移動#certification.します。$(function(){});どこに配置されていても、要素を参照するスクリプトが正常に実行されることを確認します (ready コールバックはドキュメントの準備が整ったときにのみ実行されるため)。

document.ready の外で要素を参照する場合、$('#certification')または DOM の要素の前で要素を参照する場合、要素を選択しません。委任されるドキュメント ヘッドにイベントをバインドするイベント委任を除いて、セレクターの場合と同じです。ドキュメントヘッドは常に参照できるものであるため、一致するセレクター（これはまったく別の動物です）に。

于 2013-10-10T20:41:50.897 に答える
1

$()「以下のスクリプトから2 つの aka ready ハンドラーを削除することは可能ですか?」

スクリプトには準備完了ハンドラーが1 つしか含まれていませんが、削除できます。

「#certification上記のスクリプトの前に が表示されると仮定してください。DOM 全体が準備される前にスクリプトから参照したいのです#certificationが、$ready ハンドラなしでこれを行うことは可能ですか?」

はい。スクリプト要素内のコードは、そのスクリプトの前に表示される要素を参照できます。これは、ページ ソースの上位にある要素が既に解析され、DOM に追加されているためです。したがって、スクリプトが要素の後にある場合は、次のように簡単に実行できます。

       $("#certification").multiselect({
           minWidth: "500",
           noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
           selectedText: function(numChecked, numTotal, checkedItems){
               return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
           }
       });

"EDIT2: 上記は次の場所にあると想定してください<head>"

は？これは、以前の「想定してください」というステートメントと矛盾しています。スクリプトを head に配置しながら、要素の後に配置するにはどうすればよいでしょうか? #certificationhead セクションに「通常の」要素を含めることは想定されていません。必要に応じて、title 要素と base、link、meta、style、または script 要素のみを含めます。head に含めた場合#certification、一部のブラウザーでは動作する可能性がありますが、それは良い計画ではありません。

ルールはそれほど複雑ではありません。特定のスクリプトが要素を参照するには、要素が DOM に追加された後にスクリプトを実行する必要があります。したがって、次のいずれかです。

  • 参照する要素の後に script 要素を含める
  • スクリプトを DOM 対応 (またはオンロード) ハンドラーに含める
  • 上記の両方

ページに複数のスクリプト ブロックを含めることができるので、要素$("#certification").multiselect({...})の直後にある独自のスクリプト要素にその部分だけを含め#certificationてから、他のスクリプトを別の場所に含めることができます (たとえば、head 内の DOM 対応ハンドラー、または終了</body>タグの直前のボディの終わり)。

編集:別の回答の下に投稿したいくつかのコメントから、 「 DOM の読み込みが完了するのを待つ必要はありませんか?」$と「レディハンドラーを使わざるを得ないの$()ですか？それなしでjqueryを書く方法はありませんか？」、そして最初の質問で「別名レディハンドラー」が2つあると話したという事実は、誤解しているようです関数が何をするか。$()$()

$()は単に のエイリアスであり、引数として関数が渡された場合にのみjQuery()DOM 対応ハンドラーを作成します。文字列を渡すとき、それは準備ができたハンドラーの作成とは関係ありません。$("#certification")

于 2013-10-10T20:50:10.610 に答える
1

普遍的な方法の 1 つは、要素の可用性をポーリングし、それが存在するまで延期することです。

(function doit(){
          var fields= $("#certification");
         if(!fields.length){return setTimeout(doit, 50);}
            fields.multiselect({
               minWidth: "500",
               noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
               selectedText: function(numChecked, numTotal, checkedItems){
                   return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
               }
           });
    }());

イベントまたは委任されたオブザーバーを使用することをお勧めしますが、最適な方法でタグを並べ替えることができない場合、これは機能します。

于 2013-10-10T20:44:44.043 に答える
1

DOM の準備が整う前に jquery をロードしたいのですが、それでも #certification を参照できます。

どうして？

これ#certificationは DOM の一部ですが、ロードする前にどのように参照しますか?

要素の減速後にスクリプトを実行すると意味があります。

于 2013-10-10T20:42:09.037 に答える