PHP包含了jQuery的混乱

时间:2013-03-16 07:55:32

标签: php jquery include

每当我在我的主页上尝试构建一个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>

解: 通过从<html><head>删除所有<body>header.phpfooter.php声明,只留下<div>标记来获得解决方案。

2 个答案:

答案 0 :(得分:1)

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

您是否注意到多个doctype,html,head,body声明?对于自定义页眉和页脚等片段,您应该废除这些声明,因为片段不应该是完整的html页面。

其他内容:

即使删除了这些根级别元素,也要确保您的HTML有效。不是在你的情况下,但通常标题包括放在html-&gt;头部内。所以'divs','tables'和其他这样的元素如果放在头部内部会打破html。为了避免类似的问题,请注意头部和身体部分的内容。

答案 1 :(得分:0)

解决方案:通过从header.php和footer.php中删除所有html,head,body声明来获得解决方案,只留下div标签。