Question

这是我的模板示例代码。

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
  ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>WebLAB</title>
 <link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
 </head>
 <body class="container">   
 <header class="panel-heading" role="navigation">
  <a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
  <nav>
      <ul class="nav nav-tabs" role="tablist">
      <li><a href="<?php echo base_url(); ?>portal/registration">Register</a></li>
        <li><a href="<?php echo base_url(); ?>portal/about">About this site</a></li>
      </ul>
  </nav>
 </header>
 <section class="container">

  <!--- Dynamic content is loaded here!-->
 <?php if(isset($content)) echo $content; ?>


 </section> 
 <footer class="panel-footer text-center">
  <span><small>All Rights Reserved | &copy; <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
 </footer>

 <script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
 <script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
 </body>
 </html>

下面的代码是我加载到上面代码的内容（它动态地嵌入内容）。我的问题是我试图应用于元素的Javascript代码没有响应。我也试过在上面的主页上添加脚本。

    <script type="text/javascript">
            $(document).ready(function(){
                $('#jq').click(function(){
                  alert("Hi");
                });
            });
    </script>

    <section class="col-md-8">
      <p>
         <h2 id="jq">Register Your Account here to Login!</h2>
      <p>
      <article>
        <p>
          You can only access your account when the admin 
          approves your request for registration.
        </p>
      </article>
    </section>

  <section class="col-md-4">   
    <form method="post" class="regform" action="<?php echo base_url();?>portal/register" role="form">
      <div class="form-group">
        <label for="Username" id="sample">Username:</label>
         <input type="Username" class="form-control" id="Username" name="username" placeholder="example@mail.com" required>

      </div>
      <div class="form-group">
         <label for="pwd">Password:</label>
         <input type="password" class="form-control" id="pwd" name="password" required>
      </div>
      <div class="form-group">
         <label for="pwd">Retype-Password:</label>
         <input type="password" class="form-control" id="pwd" name="repassword" required>
      </div>
      <button type="submit" class="btn btn-default">Register</button>
   </form>
</section>

我在CodeIgniter 3控制器中使用这种技术。

public function registration() {
    $data = null;
    $data['content'] = $this->load->view('pages/registration', $data, true);

    $this->load->view('template/temp_portal.php', $data);
}

对于凌乱的代码感到抱歉。非常感谢您的帮助。这只是一个示例代码BTW。

Answer 1

您的问题是您在加载库之前使用的是jquery。在head标记中加载包含jquery库的JS文件。它会起作用，即

<?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>WebLAB</title>
  <link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
  <script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
 </head>
 <body class="container">   
 <header class="panel-heading" role="navigation">
  <a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
  <nav>
  <ul class="nav nav-tabs" role="tablist">
  <li><a href="<?php echo base_url(); ?>portal/registration">Register</a></li>
    <li><a href="<?php echo base_url(); ?>portal/about">About this site</a></li>
  </ul>
</nav>
</header>
<section class="container">

 <!--- Dynamic content is loaded here!-->
 <?php if(isset($content)) echo $content; ?>


</section> 
<footer class="panel-footer text-center">
 <span><small>All Rights Reserved | &copy; <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>


</body>
</html>

尝试此操作并检查控制台现在显示的错误

仔细检查您的jQuery库链接是否正常

模板上动态添加的内容不响应CodeIgniter中的Javascript / AJAX / Jquery

1 个答案: