0

実際に開いたモーダル ビューから新しいブートストラップ モーダル ビューを開こうとしています。

次のテンプレートを使用して、さまざまなモーダルをすべて開いています。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">&nbsp;</h3>
  </div>
  <div class="modal-body">
    <div class="alert alert-error" style="text-align: center;">
      <strong>ERROR!</strong><br />You should not be able to see this text!^
    </div>
  </div>
</div>
<script>
    $("a[data-target=#myModal]").click(function(ev) {
        ev.preventDefault();
        var target = $(this).attr("href");

        // load the url and show modal on success
        $("#myModal .modal-body").load(target, function() {
            $("#myModal").modal("show");
        });
    });
</script>

次に、モーダルを RoR で呼び出します。

<a href='<%= url_for :controller => :customers, :action => :new %>' data-target='#myModal' type='button' class='btn' role='button' data-toggle='modal'>
  <i class="icon-plus"></i> new Customer</a>

実際、そのようなモーダル内のボタンを押しても何も起こりません。

4

1 に答える 1

3

まず、data-toggle="modal"独自のモーダルロードを使用する場合は、この属性を使用しないでください。リモートページが（ユーザーとプラグインによって）2回ロードされるためです。

次に、イベントをバインドすると、次のような委任されたイベントを使用しない限り、ページに既に存在する要素のみが使用されます。

$(document).on('click','a[data-target="#myModal"]', function(ev) {

});

'セレクターを囲む単純引用符と"属性値を囲む二重引用符に注意してください。

そしてそこから、それは動作するはずです：デモ（jsfiddle）

于 2013-02-10T11:00:31.333 に答える