JQueryはコンソールにペーストされてもページのロードではない

なぜこれはページの読み込みでは機能しませんが、jqueryをページのコンソールに貼り付けると機能します。あなたのWebページを設定しているように見える方法で判断JQueryはコンソールにペーストされてもページのロードではない

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Alex Cory</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
    </head> 
    <body id="page-top" data-spy="scroll" data-target=".navbar-custom"> 
    <div id="root"></div> 
    <script src="src/app.js"></script> 
    <script src="//code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <script> 
     $(document).ready(function(){ 
     $('.page-scroll a').bind('click', function(event) { 
      console.log('CLICKED BUTTON! ^_^'); 
      event.preventDefault(); 
     }); 
     }); 
    </script> 
    </body> 
</html>

出典

2016-04-29 Alex Cory

質問 '$の要素である（「ページ・スクロールA」）がすでに存在するため、コードのコンソールが正確でない理由ですから、JQuery.on()方法

を使用して' –

、私はあなたからページにコンテンツを注入している疑いがある：コード自体には実際のコンテンツがありませんので、

<script src="src/app.js"></script>

。

これが事実である場合は、ページのロード時と$(document).ready()火災、$('.page-scroll a')戻りnullので、それはまだDOMにレンダリングされていないので、それは単にそれを置くために、です。

この問題を解決するには、ロード時にページにレンダリングされる要素にイベントハンドラをアタッチする必要があります。 bodyタグは、この例のために良いですが、私たちはjQuery's onメソッドを使用してクリックすること.page-scroll aために聴きたい：

// We attach a click event listener to the body element 
// and we try to track when .page-scroll a is clicked 
$('body').on('click', '.page-scroll a' function(event) { 
    console.log('CLICKED BUTTON! ^_^'); 
    event.preventDefault(); 
});

イベントハンドラが本体に装着されているので、毎回何かがクリックされたので、これは動作しますまだ存在しない要素にイベントハンドラをアタッチしようとする前ではなく、.page-scroll aがクリックされているかどうかをチェックします。

出典

2016-04-29 20:05:10

アンカーは、DOMの準備ができたら作成する必要があります。

$('body').on('click', '.page-scroll a', function(e) {....});

そのように、人は体とターゲットは関数が実行されます.page-scroll aでクリックするたびにアンカーが、作成されたに関係なく：だから、たとえば、親要素にクリックしバインドする必要があります。

出典

2016-04-29 20:05:48 skobaljic

問題は、DOMがまだ準備されていない間に関数を呼び出すためです。

これはあなたの関数をロードすると、ページがロードされると、その特定の機能を実行するbodyタグ

//link to the script file here 
<body   onload="enterHereYourFunctionYouWantToLoad() " >

に挿入します。 jQueryの1.7のよう

出典

2016-04-29 20:06:32

jQueryのドキュメントから

、.on（）メソッドは、ドキュメントにイベントハンドラを取り付けるための好ましい方法です。以前のバージョンでは、.bind（）メソッドはイベントハンドラを要素に直接取り付けるために使用されます。ハンドラは、jQueryオブジェクトの現在選択されている要素に接続されているため、これらの要素は.bind（）の呼び出しが発生するポイントに存在する必要があります。より柔軟なイベントバインディングについては、.on（）または.delegate（）のイベント委任についての説明を参照してください。

elemente

出典

2016-04-29 20:12:47 Walter

JQueryはコンソールにペーストされてもページのロードではない

答えて

関連する問題