2

以下のように、例の div をクリックできるページを作成しようとしています。

ただし、ユーザーがロゴをクリックすると、ロードを使用して元のコンテンツがリロードされるようにしようとしています。

このロードが発生した後、ロードされた を「クリック」することは可能<div id="example">ですか? 私は現時点でこれを試しています<div id="example">が、file.phpにあるロードされたものをクリックすると警告に失敗します

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#example").click(function(){
        alert("You clicked me!");
    });

    $("#logo").click(function(){
        $("#main").load("file.php");
    });
});
</script>
    </head>

<body>
    <img id="logo" src="404.gif" />

    <div id="main">
        <div id="example">This is content.</div>
    </div>
</body>
</html>

file.php が含まれています

<div id="example">This is loaded content that can't be clicked?</div>
4

6 に答える 6

7

問題

問題は、.click()その時点で DOM に存在する要素にのみイベントをバインドすることです。つまり、新しい要素をページに追加しても、イベント ハンドラーはバインドされません。

解決

jQuery 1.7+ を使用している場合.click()は、コードで使用するのではなく、.on()代わりに使用してください。

$("#main").on('click', '#example', function(){
    alert("You clicked me!");
});

...または古いバージョンの jQueryでは、.live()代わりに次のように使用します。

$("#example").live('click', function(){
    alert("You clicked me!");
});

これにより、DOM に追加された新しい要素もイベント ハンドラーがバインドされるようになります。

于 2011-12-15T04:37:27.683 に答える
1

jquery 1.7 以降を使用している場合は、"on" を使用します。

http://api.jquery.com/on/

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。

于 2011-12-15T04:36:25.660 に答える
1

これを試して、

$("#example").live('click',function(){
   alert("You clicked me!");
});
于 2011-12-15T04:34:00.777 に答える
1

<div id="main">問題は、の innerHTML を置き換えた後<div id="example">、クリック アクションがなくなることです。

これを解決するには、いくつかの方法があります。

まず、おそらく最良の方法は、次を使用すること.on()です。

$("#main").on('click', '#example', function(){
   alert("You clicked me!");
});

これは付属し#mainているため、内部のコンテンツをどうするかは問題ではありません。イベントがバブルアップすると、 によって通知されon、セレクターはハンドラーを実行するかどうかを決定します。

2つ目はライブです。以下は、あなたの現在のクリックを置き換えます#example:

$("#example").live('click', function(){
   alert("You clicked me!");
});

これの 1 つの欠点は、jQuery が常に dom の変更を監視していることです。変更の数によっては、速度が低下し始める可能性があります (ただし、より高速なマシンではそれほど顕著ではないかもしれません)。また、.live()1.7 で廃止されました。

#logo最後のオプションは、クリック時に成功関数を追加することです。コードが重複しないように、メソッドを作成することをお勧めします。

var example_click = function() {
    alert("You clicked me!");
};

$("#example").click(example_click);

$("#logo").click(function(){
    $("#main").load("file.php", example_click);
});

#mainこれは、 afterが正常にロードされるたびに、クリックが に追加されることを意味します#example。しかし、関数を 2 回呼び出す必要があるため、これはちょっと厄介です。

于 2011-12-15T04:34:20.937 に答える
0

load 関数のコールバックに divのclick()関数を入れてみてください。example

于 2011-12-15T04:33:47.937 に答える
0

jQuery 1.7 では、.on()イベント バインディングとイベント委任のための API が導入されました。

$("#main").on("click", "#example", function() {
    alert("You clicked me!");
});
于 2011-12-15T04:44:33.983 に答える