0

jQuery/bootstrap コードをお見せしたいと思います。jsfiddle : demoで必要なコードを抽出します。動作は次のとおりです。

  1. jsfiddle プロジェクトを実行する
  2. ipsum テキストの上にマウスを置きます
  3. 表示されたブートストラップ ポップオーバーで、[もっと見る >>] リンクをクリックします。
  4. クリック時の機能がトリガーされ、新しいウィンドウ 800x600 が表示されます
  5. このウィンドウを閉じます
  6. ステップ 2 に進みます。
  7. ステップ 4. の代わりに、関数はトリガーされず、代わりに新しいタブが開かれます

ユーザーが「もっと見る>>」をクリックするたびに、関数をトリガーしたいと思います。

スコープ、変数、競合など、javascript コードが問題であることは確かです。わかりません。

何がうまくいかないかについて、意見、アドバイス、または良い習慣はありますか?

デモはこちら. 私が話す機能は次のとおりです。

function (e) {
    e.preventDefault();
    var width  = 800,
        height = 600,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href;
    var opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;
    window.open(url, 'manual', opts);
    return false;
}
4

1 に答える 1

1

あなたの問題は「単純」です。

まず、ポップオーバー HTML コンテンツを生成する関数「formatPopoverContent」があります。ここでクリックイベントをバインドします。

問題は、関数が一度実行されることですが、ブートストラップによって生成されたポップオーバーがポップオーバー div を作成し、オンザフライで DOM に挿入します (ホバーすると div が作成され、マウスアウトすると div が DOM から削除されます)。関数では、cordialManualLink.on('click', …) を使用してクリック イベントをバインドします。ここで、cordialManualLink は関数によって初めて作成されますが、ポップオーバーによって削除されます (私が非常にクリア…）。イベントをバインドする方法では、新しく作成された要素はバインドされません。

そのため、フィドルでは、2回目にクリックしたときだけでなく、ホバーしてからマウスアウトしてからもう一度ホバーすると（最初にクリックすることなく）、新しいウィンドウが表示されません。

解決策は、クリック イベントを「ライブ」バインドして、新しい要素が作成されてもバインドされるようにすることです。

したがって、解決策は単純に行うことです：

$(document).on('click', cordialManualLink, …);

それ以外の

cordialManualLink.on('click', …);
于 2013-05-23T10:07:43.347 に答える