php echo和JQuery .load中的bootstrap modal

时间:2016-04-14 07:10:12

标签: javascript php jquery html twitter-bootstrap

我有index.php,它使用jQuery调用其他test.php并将内容加载到一个div标签中。

但如果我将模态放在 test.php echo中,它就不起作用了。 莫代尔没有打开。

这是我的 index.php

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/custom.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="try"></div>
  </body>
  <script>
    function loadUnSolved(){
      $("#try").load("test.php");
    }
    $(document).ready(loadUnSolved());
  </script>
</html>

test.php的

<?php
echo '
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="modal12">Otryl</button>

<!-- Modal -->
<div id="modal12" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>text</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>';
?>

我认为问题出在$(document).ready()

2 个答案:

答案 0 :(得分:1)

尝试以下

Index.php:

<script>
    function loadUnSolved(){
        $("#try").load("test.php");
    }

    $(document).ready(function(){loadUnSolved()});
</script>

test.php :(你错过了#符号)

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal12">Otryl</button>

答案 1 :(得分:0)

你需要添加一个闭包

$(document).ready(function(){
  loadUnSolved();
});