DOMがhtmlで完全に読み込まれたときに要素を使用する

ドキュメントが完全に読み込まれたときにbodyタグの子要素を使用したい。私のようにDOMがhtmlで完全に読み込まれたときに要素を使用する

<body> 
    Country: <br> 
    <div> 
     <datalist id="country"></datalist>   
     <input type="text" list="country" id="search" onmouseover = 'populate("country")'/>   
    </div> 
</body>

入力要素では、私はonmouseoverイベントを使用してjavascript関数を呼び出しています。しかし、私はすべての要素が完全にロードされているときに、そのことを有効にしたい。

これまで、私はonloadイベントがあり、特定の機能を呼び出すためにbodyタグで使用できることをオンラインで見てきました。しかし、私はonloadイベントで何の関数も呼びたくないので、bodyが完全にロードされたときにinput要素のonmouseoverイベントが発生するようにしたいだけです。

出典

2016-07-25 Umair Jameel

（ドキュメント）.ready（関数（）{}）$を試します。代わりに関数.. – Karthikeyan

あなたはwindow読み込みイベントをリッスンするようにjQueryを使用して、すべてのメディアが完全にロードされたときに入力の上ごmouseoverリスナーを作成することができます。

$(window).on("load", function() { 
    $("#search").on("mouseover", function() { 
     populate("country"); 
    }); 
});

代わりのwindow.loadあなたもdocument.readyを使用することができます。最初のものは、画像のような他のすべてのものがロードされるまで待つことさえあります。 DOMが終了するまで、最後は...お待ちしております

// $(function() {}) is a shorthand for $(document).ready(function() {}); 
$(function() { 
    $("#search").on("mouseover", function() { 
     populate("country"); 
    }); 
});

出典

2016-07-25 10:40:09 eisbehr

私はすべての要素を作って、ウィンドウがロードされる前に使われない場合はどうしますか？要素は任意のイベント（マウスオーバーではなく）を持つことができます。 –

あなたの実際のプロジェクトに属します。 1つの簡単な考え方は、デフォルトで本文を非表示にして、ページの読み込みが完了したときに表示することです。しかし、私が言ったように、それはあなたのプロジェクトに属します。一般的に私はなぜあなたが 'load'まで待たなければならないのか分かりません。それは特殊なケースです... – eisbehr

あなたにこの

あなたのHTMLコード

<body> 
    Country: <br> 
    <div> 
     <datalist id="country"></datalist>   
     <input type="text" list="country" id="search" />   
    </div> 
</body>

のためのjQueryを使用することができますjavascriptのコード

$(document).ready(function(){ 
    $("#search").hover(function(){ 
     populate('country'); 
    }); 
});

出典

2016-07-25 10:40:16

'hover（）'は 'mouseover'イベントと同じではないことに注意してください。' mouseenter'と 'mouseleave'の組み合わせです。 –

@RoryMcCrossan、Yes Right、Cheers .. !!! –

jqueryで使用する

$(document).ready(function(){ 
 
     $('#search').on('mouseenter', function(){ 
 
      console.log('mouse over'); 
 
      }) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Country: <br> 
 
    <div> 
 
     <datalist id="country"></datalist>   
 
     <input type="text" list="country" id="search" />   
 
    </div>

出典

2016-07-25 10:40:34

答えて

関連する問題