1

次のような Bootstrap の「分割ボタン」モーダルを作成しています。

<div class="btn-group">
  <button class="btn btn-small btn-primary">
    <a tabindex="-1" href="#" class="ajax-modal" 
       data-target="modal_vr-comment-form" data-backdrop="true" 
       data-controls-modal="res-modal" data-keyboard="true" 
       url="/some-url">Do the thing</a>
  </button>
  <button class="btn btn-small dropdown-toggle btn-primary" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right">
    <li><a tabindex="-1" href="#" class="ajax-modal" 
           data-target="modal_vr-comment-form" data-backdrop="true" 
           data-controls-modal="res-modal" data-keyboard="true"
           url="/some-url">Do the thing</a></li>
    <li><a tabindex="-1" href="/comment/something-else">Do something else</a></li>
    <li><a tabindex="-1" href="#" class="ajax-modal" 
           data-target="modal_unhide-people" data-backdrop="true" 
           data-controls-modal="res-modal" data-keyboard="true" 
           url="/comment/do-another-thing">Do another thing...</a></li>
  </ul>
</div>

ここで興味深いのは、「Do the Thing」アクションが 2 つの方法で提示されることです。メイン ボタンがクリックされたときに実行されるアクションとして、およびドロップダウン メニューの項目が選択されたときに実行されるアクションとして表示されます。<a>これらのアクションは、JavaScript の初期化を介して、分割ボタンのタグのクリック ハンドラーとして設定されます。

どちらのアクションも、Chrome と Safari で正常に機能します。ただし、Firefox では、ボタンに添付されたアクションは起動しませんが、リンクに添付されたアクションは起動します。実行中にちょっと調べてみると、ボタンのクリック ハンドラーが起動していないことがわかりますが、確実にセットアップされています。

これが（起こっている）理由についてのアイデアはありますか？ありがとう！

4

2 に答える 2

2

多かれ少なかれ、それを見つけました：Twitter Bootstrap ボタンは IE8 で応答しません 有効なアプローチがありました。ボタンを次のようにフォーマットする代わりに：

  <button class="btn btn-small btn-primary">
    <a tabindex="-1" href="#" class="ajax-modal" 
       data-target="modal_vr-comment-form" data-backdrop="true" 
       data-controls-modal="res-modal" data-keyboard="true" 
       url="/some-url">Do the thing</a>
  </button>

<A>適切なボタン スタイル クラスとの純粋なリンクとして実行します。

<a tabindex="-1" href="#" class=" btn btn-small btn-primary ajax-modal" 
   data-target="modal_vr-comment-form" data-backdrop="true" 
   data-controls-modal="res-modal" data-keyboard="true" 
   url="/some-url">Do the thing</a>

外観は同じで、Firefox、IE、および Opera (両方のプラットフォーム) で正常に動作します。うわー。

于 2012-10-25T20:01:03.540 に答える