0

ZoomyおよびjmpressプラグインでjQuery 1.7.2を使用しています。また、initializr.com からダウンロードしたボイラープレート + ブートストラップを使用しています。

写真の中からキャラクターを見つけなければならないときに、[Waldo/Wally] のような「ゲーム」を作成しようとしています。それぞれの写真には、見つけるべき異なるキャラクターがあります。

jmpress をプレゼンテーション プラグインとして使用して、キャラクターが見つかるたびにある写真から別の写真に移動しています。jmpress は ajax を介してコンテンツをロードします (そして、その動作が必要です)。これは、Web のかなり高速なロードが必要なためです。

問題:ロードされたコンテンツ内に存在する要素の 1 つで .on("click") イベントがキャッチされません。

例として、この文字の 1 つを使用して問題を説明します (コードの一部を取り上げただけです)。

index.html にキャラクターをロードするための div がいくつかあります。ナース キャラクターを使用します。

<div id="nurse" class="step container" data-src="women/nurse.html" data-x="7500">
  Loading...
</div>

jmpress は、ユーザーがその div (ステップ) の近くにいるときに、ajax を介して data-src (women/nurse.html) をロードします。それは素晴らしい負荷です。

これは、nurser.html のコードです。

<script type="text/javascript">
    new Image().src = "img/nurse_big.jpg";
</script>
<div class="descripcion">
    <p>Bla, bla, bla.</p>
</div>
<div class="imagen">
    <a href="img/nurse_big.jpg" class="zoom"> <img src="img/nurse.jpg" alt="Find the nurse" /> </a>
</div>

ご覧のとおり、#nurse div (.step クラスを持つ) 内に 2 つの div がロードされています。

クリックイベントをキャッチしようとすると、js/script.js ファイルに次のコードがあります。

$(".step").on("click", function(event){
    console.log(event.target);
});

また、何が起こるかを確認するために「body」タグを試しています

$("body").on("click", function(event){
    console.log(event.target);
});

メッセージが表示されている間にコンソールを確認すると (div.descripcion)、イベントをキャッチして出力します。しかし、div.descripcion が削除されて画像が表示された後、表示されません。その div.imagen またはその中の要素でさえ存在しない場合のように。クリック イベントはキャッチされません。mousemove イベントをキャッチしようとしましたが、そうです。

クリックをキャッチしないのはなぜですか? 何か案が？

動作中のバージョンを見ることができます: [削除済み]

そして動作しないバージョン: [削除]

更新: .on("click") を使用すると機能しないことを忘れていました。しかし、たとえば .on("mousemove") を使用すると、機能します。それが奇妙な部分です。.on() は機能していますが、クリック イベントでは機能していません。

更新 2:ライブ サンプルのリンクを削除しました。開発バージョンが含まれているためです。が公開されたら最終作品へのリンクを公開します。お時間を割いていただき、ありがとうございました。特に@Esailjaに答えを教えてください。

4

4 に答える 4

4

on繰り返しになりますが、後でロードされるコンテンツに使用する必要があります。

$("body").on("click", ".step", function(event){
    console.log(event.target);
});

要素を保持するbody最も近い静的要素に置き換え.stepます。
静的とは、次の行を実行したときに DOM に存在することを意味します。

$(...).on("click", ".step", function(event){

例：

$('#ContainerId').on("click", ".step", function(event){
    // Do what you want.
});

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

onドキュメント

于 2012-06-24T19:37:34.120 に答える
2

あなたが使用しているズームプラグインはこれを行います：

 'click': function () {
    return false;
}

画像上でクリックしている要素は実際にはズーム要素であるため、最初にイベントを処理します。彼らは によってそれをreturning false扱いe.stopPropagation()ますe.preventDefault()。そのため、イベントは にも来ません.imagen。

コードには終了していない複数行のコメントもありますが、それが何をするのかはわかりませんが、うまくいきません。コードをコメントアウトするのではなく、コードを削除することを検討してください。

とにかく、次のようにすべてをクリアします。

$.cache = {}; //Can also do $("*").off() I think

そして、次のことを行います：

$(".step").on("click", ".imagen", function(event){
    console.log(event.target);
    event.preventDefault();
});

そして、それはうまくいきます。プラグインを編集して、代わりにこれを行うことができます。

'click': function (e) {
    e.preventDefault();
}

または、自分が何をしているのかを知っている人が開発したプラグインを探すか、自分で作成することもできます。

于 2012-06-24T20:12:20.473 に答える
0

http://zoomy.me/Options.htmlのドキュメントでは、クリック可能なオプションにtrueを追加することで、プラグインにクリック可能な領域を持たせることができます。

したがって、要素を呼び出すときzoomy()は、zoomy関数内にコードを少し追加するだけです。

$('.element').zoomy({clickable:true});

そしてそれはすべてを修正するはずです、

于 2012-06-24T20:55:21.920 に答える