2013-02-19 38 views
1

我在我的项目中使用Bootstrap v2.X,我想使用模态函数打开外部文件。Jquery函数不工作在Bootstrap模式下

首先,我应该使用的代码是:

<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代码。这很奇怪,因为bootstrap CSS解释得很好。

我认为这是由于我用来打开外部模式的jQuery代码。

+2

通常直接孩子尝试改变代码$(“身体”)。在(”点击','.nom_epi',function(){alert(“hello”);}) – 2013-02-19 16:31:36

+0

It Works !!谢谢你 – Alexander 2013-02-20 15:25:58

+0

不客气!如果你想了解它是如何工作的,请检查一下https://tutsplus.com/lesson/bind-live-delegate-huh/ – 2013-02-20 15:52:59

回答

8

您在文档准备好时绑定事件,因此它仅绑定到当时存在的元素。我建议使用on()函数。

的建议大卫给出了他的意见应该很好地工作。

$( '身体')上( '点击', '.nom_epi',函数(){警报( “你好”); })

一般来说,你会尝试和功能绑定的东西进一步下跌的DOM树,但这些模态都是<body>

+1

It Works !!谢谢你 – Alexander 2013-02-20 15:25:30