php - PHP 包含与 jQuery 的混乱

Question

每次我试图在我的主页上构建一个 jQuery 应用程序时，该应用程序都会开始自己做事并停止响应我的请求。例如，我正在尝试实现一个图像滑块，当我运行页面时，播放/暂停按钮不起作用，您可以看到图像相互重叠。但是当我删除我所有的 PHP 包含时，它可以正常运行而没有任何错误。这是一个常见错误吗？有没有办法让 jQuery 接受包含的存在而不会失去控制？

<?php
function customPageHeader(){?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.slider.css" />

<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/slider/jquery.slider.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $(".slider").slideshow({
        width      : 900,
        height     : 325,
        transition : 'slide'
      });
    });
  </script>
</head>
<body>

<?php }
include_once('header.php');
?>

<div class="content">
  <div class="content_01">
    <div class="slider2"> 
    <div id="wrapper">
  <div class="slider">
    <div> <img src="assets/serie_1.jpg" alt=""/> </div>
    <div> <img src="assets/serie_2.jpg" alt=""/> </div>
    <div> <img src="assets/serie_3.jpg" alt=""/> </div>
    <div> <img src="assets/serie_4.jpg" alt=""/> </div>
  </div>
</div>
    </div>
  </div>
</div>
<div style="float:none; clear:both;"></div>

<?php
include_once('footer.php');
?>

</body>
</html>

在我的header.php，我有：

<!doctype html>
<html>
<head>
<!-- ****************  CSS CALL  ************************** -->
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<!-- ************  JAVASCRIPT CALL  *********************** -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/ablaze_hyper-block.js"></script>
<script type="text/javascript" src="scripts/ablaze_geral.js" charset="utf-8"></script>

<?php if (function_exists('customPageHeader')){
      customPageHeader();
    }?>
</head>

<body>
<div class="header">
  <div class="h_wrapper">
    <div class="logo"><a href="/"></a></div>
    <div class="navigation">
      <ul class="n_list">
        <li class="tab_select01"><a href="/">TEST</a></li>
        <li class="tab_select02"><a href="#">TEST</a></li>
        <li class="tab_select03"><a href="#">TEST</a></li>
        <li class="tab_select04"><a href="contacto.php">TEST</a></li>
      </ul>
    </div>
    <div class="hb_wrapper">
      <div class="hyper_block">
        <div class="icon fb_icon"><a href="#" target="_blank"><img src="images/hyper_block/fb_icon.png"/></a></div>
        <div class="icon tw_icon"><a href="#"  target="_blank"><img src="images/hyper_block/tw_icon.png"/></a></div>
        <div class="icon lg_icon"><a href="#"><img src="images/hyper_block/lg_icon.png"/></a></div>
        <div class="icon nl_icon"><a href="#"><img src="images/hyper_block/nl_icon.png"/></a></div>
        <div class="fb_content"> <a href="#"  target="_blank"><img src="images/hyper_block/fb_content.png"/></a></div>
        <div class="tw_content"><a href="#"  target="_blank"><img src="images/hyper_block/tw_content.png"/></a></div>
        <div class="lg_content"></div>
        <div class="nl_content">
          <ul>
            <li>TEST</li>
          <li><form id="h_nl_form" charset="utf-8" >
          <table width="160" border="0" cellspacing="0" cellpadding="0" style="margin-left:3px;">
  <tr>
    <td><input type="text" id="h_nl_fname" class="h_nl_fname" name="name" maxlength="12" value=" Nome*" onBlur="if(this.value == ''){ this.value = ' Nome*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Nome*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
    <td><input type="text" id="h_nl_lname" class="h_nl_lname" name="last_name" maxlength="12" value=" Apelido*" onBlur="if(this.value == ''){ this.value = ' Apelido*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Apelido*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
  </tr>
</table>
<table width="160" border="0" cellspacing="0" cellpadding="0"  style="margin-left:3px;">
  <tr>
    <td width="132"><input type="text" id="h_nl_email" class="h_nl_email" name="email" maxlength="40" value=" Email*" onBlur="if(this.value == ''){ this.value = ' Email*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Email*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
    <td><input type="button" class="h_btn" value=">"/></td>
  </tr>
</table></form><div class="h_error_display"></div>
<div class="h_success_display"></div>
</li>

          </ul>

        </div>
      </div>
    </div>
  </div>
</div>
<div style="float:none; clear:both;"></div>
</body>
</html>

在我的footer.php，我有：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="scripts/ablaze_geral.js" charset="utf-8"></script>

<?php if (function_exists('customPageHeader')){
      customPageHeader();
    }?>
</head>

<body>
<div style="float:none; clear:both;"></div>
<div class="footer">
<div class="f_bar_top"></div>
  <div class="f_wrapper">
    <ul>
      <li><a href="index.php" ><img src="images/logo.png"/></a><br/>
        <h1 class="h_footer">CONTACTE-NOS</h1>
        <br/>
        <table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="35"><img src="images/contactos/f_email_icon.png"></td>
    <td><h3 class="h_footer"><p><a href="mailto:#" title="#">#</a></p></h3></td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="35"><img src="images/contactos/f_telf_icon.png"></td>
    <td><h3 class="h_footer">+351 91 000 00 00</h3></td>
  </tr>
</table>
        <br/>
      </li>
      <li><br/>
      <p><h1 class="h_footer">LINKS POPULARES</h1></p>
        <h3 class="h_footer"><p><a href="/">INÍCIO</a></p>
        <p><a href="">SERVIÇOS</a></p>
        <p><a href="">PORTEFÓLIO</a></p>
       <p><a href="">QUEM SOMOS</a></p>
        <p><a href="contacto.php">CONTACTO</a></p></h3>
        </li>
      <li><br/><h1 class="h_footer">ACOMPANHE-NOS</h1>
      <table width="220" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:8px;">
  <tr>
    <td width="35" height="30"><a href="#" target="_blank" title="facebook"><img src="images/contactos/f_facebook.png"></a></td>
    <td><a href="#" target="_blank" title="#">#</a></td>
  </tr>
  <tr>
    <td width="35"><a href="#" target="_blank" title="twitter"><img src="images/contactos/f_twiter.png"></a></td>
    <td><a href="#" target="_blank" title="#">#</a></td>
  </tr>
</table><h2 class="h_footer">NEWSLETTER</h1>
<form id="nl_form" charset="utf-8" >
<table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="112"><input type="text" id="f_nl_fname" class="f_nl_fname" name="name" maxlength="12" value=" Nome*" onBlur="if(this.value == ''){ this.value = ' Nome*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Nome*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
    <td><input type="text" id="f_nl_lname" class="f_nl_lname" name="last_name" maxlength="12" value=" Apelido*" onBlur="if(this.value == ''){ this.value = ' Apelido*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Apelido*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
  </tr>
</table>
<table width="220" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="184"><input type="text" id="f_nl_email" class="f_nl_email" name="email" maxlength="40" value=" Email*" onBlur="if(this.value == ''){ this.value = ' Email*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Email*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
    <td><input type="button"  class="f_btn" value=">>"></td>
  </tr>
</table>
</form>
<div class="f_error_display"></div>
<div class="f_success_display"></div>

      </li>
      <li class="f_last"></li>
    </ul>
  </div>
 <div class="f_bar_bottom"><div style="float:none; clear:both;"></div></div>
</div>
</body>
</html>

解决方案：通过从and中删除所有<html>, <head>,<body>声明得到解决方案，只留下标签。header.phpfooter.php<div>

score 1 · Accepted Answer

因为这解决了你的问题。我发布我的评论作为解决方案。

你注意到多个 doctype、html、head、body 声明了吗？对于自定义页眉和页脚等片段，您应该取消这些声明，因为这些片段不应该是完整的 html 页面。

额外的东西：

即使在删除这些根级元素之后，也要确保您的 HTML 是有效的。不是你的情况，但通常标题包含放在 html->head 内。所以'divs'、'tables'和其他这样的元素如果放在头部会破坏html。为避免类似问题，请注意头部和身体部分的内容。

score 0 · Accepted Answer

解决方案：通过从 header.php 和 footer.php 中删除所有 html、head、body 声明得到解决方案，只留下 div 标签。

php - PHP 包含与 jQuery 的混乱

2 回答 2

Related

Reference