Jquery函数不能在Bootstrap模式下工作 [英] Jquery functions not working in a modal of Bootstrap
问题描述
我在我的proyect中使用Bootstrap v2.X并且我想使用模态函数打开外部文件。
I use Bootstrap v2.X in my proyect and I want to open a file external using modal function.
首先，我应该使用的代码是：
First, the code I should use is:
<a href="view_graphics.php" class="btn btn-warning btn-large" data-toggle="modal">Graphics</a>
但它对我不起作用。然后我使用：
but it doesn't work for me. Then I use:
<a href="view_graphics.php" id="graphics" class="btn btn-warning btn-large">Graphics</a>
我把代码放到Jquery：
and I put code 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。
Well, but it doesn't the principal problem. The problem is when the modal is open, don't work my code 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>
如果我把代码放在原始文件中：
If I put the code in the file original:
$(document).ready(function() {
$('.nom_epi').click(function() { alert("hello"); });
});
它不起作用！
外部模态忽略原始文件的Jquery代码。这很奇怪，因为引导程序CSS解释得很好。
It doesn't work! The external modal ignores Jquery code of the original file. It's strange because the bootstrap CSS interpreted good.
我认为这是由于我用来打开外部模态的jQuery代码。
I think it is due to the jQuery code I use to open the external modal.
推荐答案
您在文档准备就绪时绑定事件，因此它只绑定到当时存在的元素。我建议使用 on（）函数。
You're binding the event on document ready, so it only binds to elements that exist at that time. I suggest using the on() function instead.
David在评论中给出的建议应该可以正常工作：
The suggestion David gives in his comment should work fine:
$（'body'）。on（'click'，'。nom_epi'，function（）{alert（hello）; }）
$('body').on('click', '.nom_epi', function() { alert("hello"); })
一般来说，你会尝试将函数绑定到DOM树下面的东西，但这些模态通常是< body>
Generally you would try and bind the function to something further down the DOM tree, but these modals are usually direct children of <body>
这篇关于Jquery函数不能在Bootstrap模式下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
