为什么网址中的“＃”会阻止jquery脚本执行？

Question

I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. 我正在使用“ DynamicPage” jQuery插件来使我的页面在导航时不会重新加载。 On the index page is a image slider plugin called "Coin-Slider". 在索引页面上是一个名为“ Coin-Slider”的图像滑块插件。 The dynamic page works fine, except when I click to go back to the index page where the image slider is. 动态页面工作正常，除非单击并返回到图像滑块所在的索引页面。 For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. 出于某种原因（据我所知），当回到索引时，Coin-Slider ready函数未激活。 May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. 可能与网址有关，因为host.com/index.php可以工作，但host.com/#index.php不能。 Any reason why it's doing this? 为什么这样做呢？ I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. 我试过在页面文件更改时在js文件的DynamicPage函数中包含ready函数，以便在页面更改时执行该函数，但这无济于事。 Page is included below. 页面包括在下面。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css.css" rel="stylesheet" type="text/css" />
        <title>Liberty Design, Scarborough</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
        <script type='text/javascript' src='js/dynamicpage.js'></script>
        <script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
    </head>
    <body>
        <div id="nav-back"></div>
        <div id="wraps">
            <div id="left-wrap"></div>
            <div id="right-wrap"></div>
        </div>
        <div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
            <div id="page-wrap">
                <div id="header">
                    <div id="banner">
                        <div id="social"><a href="https://www.facebook.com/pages/Liberty-Retreat/195182670529660"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></a></div>
                    </div>
                </div>
                <navbar>
                    <div id="nav">
                        <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
                        <ul id="navbar">
                            <li><a href="index.php">Home</a></li>
                            <li><a href="test.php">Facilities</a></li>
                            <li><a href="#">Staff</a></li>
                            <li><a href="#">Where are we?</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </navbar>
                <section id="main-content">
                    <div id="guts">           
                        <!-- Content Start -->
                        <div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
                            <div id="gamesHolder">
                                <div id="games">
                                    <img src="images/banner_img/1335800583.png" alt="Welcome" />
                                    <span>
                                        <b>Welcome</b><br/>
                                        Welcome to Liberty
                                    </span>
                                    <img src="images/banner_img/1335800633.png" alt="shop front" />
                                    <span>
                                        <b>shop front</b><br/>
                                        this is the front of the shop
                                    </span>
                                    <img src="images/banner_img/" alt="staff #3" />
                                    <span>
                                        <b>staff #3</b>
                                        <br/>this is the description for staff #3
                                    </span>
                                    <img src="images/banner_img/" alt="staff #1" />
                                    <span>
                                        <b>staff #1</b><br/>
                                        this is staff #1
                                    </span>
                                    <img src="images/banner_img/" alt="asdas" />
                                    <span>
                                        <b>asdas</b><br/>
                                        sdasdas
                                    </span>       
                                </div>
                            </div>
                        </div>
                       <script>
                            $(document).ready(function() {
                                $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
                            });
                        </script>
                    </div>
                </section>
                <div id="footer">
                    <!-- Cosmetics for the footer -->
                    <div id="footer-back"></div>
                    <div id="footer-wraps">
                        <div id="footer-left-wrap"></div>
                        <div id="footer-right-wrap"></div>
                    </div>
                    <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
                    <center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. 好的，mydomain.com和mydomain.com/#anything相同，它们指向您的默认文件，可以是index.php，index.html或其他文件。 The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. 浏览器导航到相同文件时不会刷新，但会使用不同的哈希标记，例如：从file＃hashA到file＃hashB或从文件到file＃hashRandom或从file＃index.php到文件。 Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded). 由于页面不会刷新（被消散），因此准备好的文档也不会被触发（页面第一次加载时就已经被触发了）。

First fix to your problem: instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php 首先解决您的问题：不要链接到mydomain.com/#index.php，而是链接到mydomain.com或mydomain.com/index.php

Second fix is: 第二个解决方法是：

<script>
$(document).ready(function() {
  var sliderInit = false;

  $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
  // Adding fix
  $('#idOfLinkThatGetsClicked').click(function () {

    if (!sliderInit) {
      $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
      sliderInit = true;
    }
  });
});
</script>

为什么网址中的“＃”会阻止jquery脚本执行？

问题描述

1 个解决方案

解决方案1
1 2012-05-04 22:39:09

为什么网址中的“＃”会阻止jquery脚本执行？

问题描述

1 个解决方案

解决方案1 1 2012-05-04 22:39:09

解决方案1
1 2012-05-04 22:39:09