3

私は次のものを持っています：

$("#menu, #home").on('click', 'a', function() {
    //  javascript code
 });

しかし、それは準備ができている文書の中にありませんか？#menu や #home がまだ DOM の一部になっていない場合でも問題なく動作しますか?

4

5 に答える 5

3

No it won’t work (see here: http://jsfiddle.net/BkxqY/). The element you attach the handler to need to exist. However you can always delegate to an element higher up in the DOM that does exists when the script is executed. F.ex, this won’t work:

<script>
    $('#menu').on('click', function(e) {
      console.log(e);
    });
</script>
<a id="menu" href="#">click</a>​

But this will:

<div id="menu">
    <script>
    $('#menu').on('click', 'a', function(e) {
      console.log(e);
    });
    </script>
    <a href="#">click</a>
</div>​​​​​​​​​​​​​​

You can always delegate to the document regardless of when you attach the handler, as the document should always be available, f.ex:

<script>
$(document).on('click', '#menu a', function(e) {
  console.log(e);
});
</script>
<div id="menu">
    <a href="#">click</a>
</div>​​​​​​​​​​​​​​
于 2012-06-04T09:59:06.557 に答える
3

liveはい、これは (セレクターを調整する場合) jQuery 1.7以降を使用している限り、DOM の準備が整うのを待つ必要なく機能しdelegateます。

のドキュメントを参照してくださいlive

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

$(document).on('click', '#menu a, #home a', function() {
  //  javascript code
});
于 2012-06-04T09:54:36.353 に答える
1

他の回答の状態とは対照的に、選択した要素がすでにdomに存在しない限り、機能しません。まだアンカー要素がなく、クリックイベントの前に追加されている場合に機能します

これは簡単に試すことができます。クロムで開発コンソールを開き、次のように入力します

$(".hopscoth").on("click","div",function(){alert("I've been clicked");});
$("body").prepend("<div class='hopscoth'><div> text </div></div>");

textページの上部に新しく挿入された

次に、最初の行をもう一度実行し、もう一度クリックしますtext。アラートは 2 回目に発生しますが、1 回目では発生しません

つまり、最初のセレクターが存在する必要があります。あなたの場合、それは#menuand#home要素が存在する必要があります。セカンダリ セレクターは、イベントが発生する前に何かと一致する必要はありません。したがって、.on を使用してイベント ハンドラーをアタッチするよりも後でアンカー要素を追加できます。

于 2012-06-04T09:57:14.857 に答える
0

コードが要素の後に配置されているが、ready イベント ブロックがなければ前に配置されていない場合に機能#menuし#homeます。

DOM に配置された要素の前に 1 つ、 http: //jsfiddle.net/hhkKE/ の後に 1 つ、2 つのクリック ハンドラーを含む DEmo

于 2012-06-04T11:12:28.037 に答える
0

いいえ、必要ありません。ページの読み込みの最後にスクリプトを実行する場合に必要です。

で実行されていないこの関数の例を、$(document).ready(function()ここで見ることができます。

あなたのスクリプトには、#menu, #home. スクリプトを希望どおりに実行するには、これらの ID を持つ要素が存在する必要があります。

于 2012-06-04T09:53:51.287 に答える