4

我在我的项目中使用 Bootstrap v2.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尝试使用window.onLoad函数，而不是document.ready在其中使用相同的 DOM 对象保持绑定函数执行。

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

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

});
于 2018-12-13T19:29:39.853 回答