2

FancyZoomを使用して、画面上に標準の JavaScript ポップアップ効果を生成しています。

JQuery を使用して、ユーザーのクリックに応答して、FancyZoom がユーザーに対してポップアップしたばかりの領域内の色を (.attr を使用して) 変更したいと考えています。

(以下のコード サンプルでは、​​ポイントを説明するためにすべての .attr を単純なものに置き換えましたalert 。Bar.png は、クリックすると Hello World を表示する金色の四角形です。[テスト] をクリックすると、おしゃれなポップアップが表示されます。 )

このように bar.png をポップアップの外に置くと、クリックしたときに期待どおりに応答します。

<script type="text/jscript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

<script>
    $(document).ready(function() {
        $('#foo').on({ 'click': function() { alert('hello world'); } });
    });
</script>
</head>

<body>
              <a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
              <div id="Test">
              <p> this is some text in the popup</p>
              </div>
              <img id="foo" src="i/bar.png" alt="asdf"/>

                <script type="text/javascript">
                    $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
                </script>

</body>

ここに画像の説明を入力

しかし、必要な場所(FancyZoom ポップアップ パネル内) に配置すると、アラートは発生しません。

<script type="text/jscript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

<script>
    $(document).ready(function() {
        $('#foo').on({ 'click': function() { alert('hello world'); } });
    });
</script>
</head>

<body>
              <a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
              <div id="Test">
              <p> this is some text in the popup</p>
              <img id="foo" src="i/bar.png" alt="asdf"/>
              </div>

                <script type="text/javascript">
                    $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
                </script>

</body>

ここに画像の説明を入力

結果: 金色の四角形をクリックしても、"hello world" は表示されません。

4

2 に答える 2

1

#fooこの要素はポップアップで再作成されるため、イベントへの参照が失われると思います。

の「ライブ」バージョンを使用しon()て、将来の要素のイベントをキャッチしてみてください。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

リンクを確認してください: http://api.jquery.com/live/

于 2012-04-27T12:16:06.753 に答える
1

前のポスターが言ったように、要素は再作成されるため、クリック機能のポインターはファンシーボックス内の要素をリッスンしません。

ただし、 live は使用しないでください。非推奨です。あなたが望まないのは、クリックイベントを常に存在する要素にバインドすることです。たとえば、#container と呼ばれるファンシーボックスの div コンテナーを取得したとします。これは、コードを記述する方法です。

$('#container').on('click', '#foo', function() {
    // code goes here.
});

上記で行ったように、 .on() 関数でイベントをリッスンする正確な要素に固執するだけです。

于 2012-04-27T12:51:03.650 に答える