1

わかりました..私はこの設定に似たものを持っています:

<button id="buynow" disabled>Add to Cart</button>

<div style="display:none">
    <div id="purchase_popup">
        Content within here
    </div>
</div>

次に、私のファンシーボックスコードは次のとおりです。

<link rel="stylesheet" type="text/css" href="includes/js/jquery.fancybox-1.3.1.css" />
<script type="text/javascript" src="includes/js/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
    $("#buynow").fancybox({
        'href'              : '#purchase_popup',
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'titleShow'         : false
    });
</script>

しかし、なんらかの理由で、buynow ボタンをクリックしても purchase_popup div がポップアップしません。私はそれを無効にしているので、別のページにつながることはありません。これは、私が関与したばかりのこのプロジェクトの現在のアクションであるためです。ファンシーボックスの「href」がキャッチする属性なのか、それとも間違った方法なのかわかりませんか?

どんな助けでも大歓迎です！

4

2 に答える 2

1 
Disabled elements don't fire mouse events. Most browsers will propagate an event 
originating from the disabled element up the DOM tree, so event handlers 
could be placed on container elements.

Firefox やその他のブラウザーでは、無効になっているフォーム フィールドの DOM イベントを無効にします。
無効化されたフォーム フィールドで開始されるイベントはすべて完全にキャンセルされ、DOM ツリーに伝搬されません。無効化されたボタンをクリックすると、イベントのソースは無効化されたボタンになり、クリック イベントは完全に消去されます。
ブラウザは文字通り、ボタンがクリックされたことを認識せず、クリック イベントを渡しません。まるで Web ページ上のブラック ホールをクリックしているかのようです。

したがって、ボタンの無効な属性を削除するか、別の回避策として、次のようなクリックを起動できる外側のコンテナを配置できます。

<div style="display:inline-block; position:relative;">
  <button id="buynow" disabled>Add to Cart</button>
</div>​
于 2013-05-16T17:48:58.130 に答える
1

いくつかのコメント:

1)。の場合、の後にアクションをトリガーする方法buttonはdisabledありませんclick。

2)。.ready()ファンシーボックススクリプトをメソッド内にラップする必要があります。

3)。fancybox v1.3.4 とコンテンツを使用しているため、このバグと回避策inlineに注意する必要があります。

したがって、次のコードを使用できます。

$(document).ready(function () {
    $("#buynow").fancybox({
        'href': '#purchase_popup',
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'titleShow': false,
        // fix for inline nested DIVs
        'onCleanup': function () {
            var myContent = this.href;
            $(myContent).unwrap();
        }
    })
}); // ready

JSFIDDLEを参照してください

于 2013-05-16T18:17:20.920 に答える