4

プロジェクトでBootstrapv2.Xを使用しており、モーダル関数を使用して外部のファイルを開きたい。

まず、使用するコードは次のとおりです。

<a href="view_graphics.php" class="btn btn-warning btn-large" data-toggle="modal">Graphics</a>

しかし、それは私にはうまくいきません。それから私は使用します：

<a href="view_graphics.php" id="graphics" class="btn btn-warning btn-large">Graphics</a>

そして私はコードJqueryを置きます：

$('a#graphics').click(function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade modal-graphics">' + data + '</div>').modal();
                }).success(function() { $('input:text:visible:first').focus(); });
            }
        });

そしてそれは動作します！。

まあ、しかしそれは主要な問題ではありません。問題は、モーダルが開いているときに、コードjQueryを機能させないことです。

これは私のモーダル外部です：

<div class="modal-header">
    <a class="close" data-dismiss="modal">x</a>
    <h3>Titulo modal</h3>
</div>
<div class="modal-body">
    <div class="window">
        <div class="nom_epi"></div>
    </div>
</div>
<div class="modal-footer">
    <a class="btn btn-primary" href="javascript:print();">Imprimir</a>
    <a class="btn" data-dismiss="modal">Cerrar</a>
</div>

元のファイルにコードを入れた場合：

$(document).ready(function() {
$('.nom_epi').click(function() { alert("hello"); });
});

動作しません！外部モーダルは、元のファイルのJqueryコードを無視します。ブートストラップCSSが適切に解釈されたので、それは奇妙です。

これは、外部モーダルを開くために使用するjQueryコードが原因だと思います。

4

2 に答える 2

14

ドキュメントの準備ができた状態でイベントをバインドしているため、その時点で存在する要素にのみバインドされます。on()代わりに関数を使用することをお勧めします。

デビッドが彼のコメントで与える提案はうまくいくはずです：

$（'body'）。on（'click'、'.nom_epi'、function（）{alert（ "hello"）;}）

通常、関数をDOMツリーのさらに下の何かにバインドしようとしますが、これらのモーダルは通常、<body>

于 2013-02-19T16:32:40.017 に答える
0

必要なDOMオブジェクト以外の場所をクリックしても、関数の実行がトリガーされるかどうかを検討してください。それは一種の混乱になります。したがって、clickイベントをにバインドbodyすることは、重いイベントのバインドになるため、推奨される方法ではありません。同じDOMオブジェクトで関数の実行をバインドし続けるwindow.onLoad代わりに、関数を使用してみてください。document.ready

$(window).load(() => {

  $('.nom_epi').click((e) => { 
      console.debug("it is working"); 
  });

});
于 2018-12-13T19:29:39.853 に答える