twitter-bootstrap Jquery 函数在 Bootstrap 模式下不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14962460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery functions not working in a modal of Bootstrap
提问by Alexander
I use Bootstrap v2.X in my proyect and I want to open a file external using modal function.
我在我的项目中使用 Bootstrap v2.X，我想使用模态函数打开一个外部文件。
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>
and I put code Jquery:
我把代码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(); });
}
});
And It works!.
它有效！
Well, but it doesn't the principal problem. The problem is when the modal is open, don't work my code jQuery.
嗯，但这不是主要问题。问题是当模态打开时，不要使用我的代码 jQuery。
This is my modal external:
这是我的模态外部：
<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"); });
});
It doesn't work! The external modal ignores Jquery code of the original file. It's strange because the bootstrap CSS interpreted good.
它不起作用！外部模式会忽略原始文件的 Jquery 代码。这很奇怪，因为引导 CSS 解释得很好。
I think it is due to the jQuery code I use to open the external modal.
我认为这是由于我用来打开外部模态的 jQuery 代码。
回答by daveyfaherty
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.
您在文档就绪时绑定事件，因此它只绑定到当时存在的元素。我建议改用该on()功能。
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"); })
Generally you would try and bind the function to something further down the DOM tree, but these modals are usually direct children of <body>
通常，您会尝试将函数绑定到 DOM 树更下方的某些内容，但这些模态通常是 <body>
回答by Sankeerna Reddy
Consider if you click anywhere apart from your required DOM object and it still triggers the function execution; it will be kind of a mess. Hence, binding clickevent to bodyis not a recommended way as it will be heavy event binding. Try to to use window.onLoadfunction instead of document.readywithin which you will keep binding function execution with same DOM object.
考虑一下您是否单击所需 DOM 对象以外的任何地方，它仍然会触发函数执行；这将是一种混乱。因此，不推荐将事件绑定click到body，因为它将是重事件绑定。尝试使用window.onLoad函数而不是document.ready在其中使用相同的 DOM 对象保持绑定函数执行。
$(window).load(() => {
$('.nom_epi').click((e) => {
console.debug("it is working");
});
});
