2012-03-22 4 views
0

ここには非常に奇妙な問題があります。 jQueryを使用して、.jsファイル内のドキュメント以外のセレクタをバインドするのに問題があります。jQueryセレクタをドキュメント以外のものにバインドできません - Rails 3.2

コード例:私は任意の場所をクリックしたときに、私はこのコードを使用する場合

$(document).click(function() { 
$("#nav_primary").empty(); 
}); 

は、nav_primary divの空には、予想通り、しかし、私がクリックしたときに

$("div").click(function() { 
$("#nav_primary").empty(); 
}); 

何も起こりません。私はそれを私のコンソールに入れない限り。上記のコードをFirebugコンソールに貼り付けると、期待どおりにロードされ、どこかをクリックするとdivを空にして期待通りに空になります。

私は私のjsでこれを持っていると予想されるとして、それがログに記録としてJavaScriptとjQueryの両方、実行されている知っている:私は試作品との競合があると聞きましたが、私は私は思いません

console.log("js is running"); 
if (jQuery) {console.log('jQuery is loaded!');} 

走っている。ここに私の頭です:

<head> 
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
    <script src="/assets/portfolio.js?body=1" type="text/javascript"></script> 
    <script src="/assets/application.js?body=1" type="text/javascript"></script> 
    <link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> 
    <meta content="authenticity_token" name="csrf-param" /> 
    <meta content="(token here)" name="csrf-token" /> 
    <!--[if !IE 7]> 
    <style type="text/css"> #main {display:table;height:100%} </style> 
    <![endif]--> 
    <!--[if lt IE 9]> 
    <script src='//html5shiv.googlecode.com/svn/trunk/html5.js'></script> 
    <![endif]--> 
</head> 

答えて

2

愚かな答えを。しかしあなたのコードをreadyに入れましたか?

あなたのDOMを見て、あなたが$(function() { });内でこれらのイベントを入れていると仮定しなければ

$(function() { 

    $("div").click(function() { 
     $("#nav_primary").empty(); 
    }); 
}); 
+0

それだけです。 jQueryを使って18ヶ月間作業していますが、他の人の機能を変更して維持することだけです。私はこれまでにこのフレームワークで自分の環境を始めたことはありません。 (また、docs.jquery.comは現時点でオフラインです) – user1279629

+0

私の答えはあなたを助けてくれてうれしいです。それがうまくいかない理由は、頭に関数を定義したためですが、jqueryが 'div'要素を見つけようとすると、ブラウザーのパーサが' head'セクションにまだ解析されているので何も見つかりません'body'や' html'タグの末尾に最初に – Rezigned

0
$("div").click(function() { 
$("#nav_primary").empty(); 
}); 

ほとんどの場合、あなたのコードを実行したときに上添付したかったdivがDOMにはまだなかった(と$("div")はちょうど空のリストでした)。

代わりにこれを試してみてください:

$(document).on("click", "div", function() { 
$("#nav_primary").empty(); 
}); 
+0

理にかなっている、とあなたのソリューションを働いたが、別の解決策を持っていたこと私が探していた答え。ありがとう! – user1279629

0

...

は試してみてください。

$(document).on('click', 'div', function() { 
    $("#nav_primary").empty(); 
}); 
+0

と書かれていましたが、これは別の答えが私が探していた解決策でした。 (そして、いいえ、$(function(){})の中に入れなかったのですが、このページもhttp://api.jquery.com/empty/私の関数がhead、例題は本文に定義されています – user1279629

+0

'$ .empty()'はjQuery ** 1.0 **からのものですので、操作の順序は文書の優先順位ではありませんでした。 '$(document).ready()'は主流ではありませんでした) – Terry

+0

うまくいけば、たくさんの関数が束縛されていなかったので、何もできませんでした。 。 – user1279629

関連する問題