4

我目前正在网站上工作前端。我正在使用 jquery 来创建动态内容。

我的问题是，当我键入我的 URI (localhost/jquery/myfile/) 并加载 index.php 时，我的 jquery 脚本可以工作，但是当我单击导航栏并且我的 #index.php 被放置在 URI (localhost /jquery/myfile/#index.php）我的一个 js 脚本，一个具有悬停效果的脚本不起作用（但我所有的其他 js 文件都可以工作，例如我的导航菜单脚本，其中也包含悬停效果） .

我进行了研究，发现当加载新的 URI 时，悬停效果停止工作。

索引.php

<section id="main-content">
<div id="guts">
    <div id="items">
        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span style="display: none;" class="caption">8 Extremely </span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">8 Amazing Javascript Experiments of Physic and Gravity Simulation</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">8 Incredible Wordpress Plugins</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">9 Web CSS Tools You Must Know</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span style="display: none;" class="caption">10 Image Galleries jQuery Script with Thumbnail Filmstrip</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span style="display: none;" class="caption">Single Page Websites With Creative Javascript Effects</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">13 Simple but Useful Online Tools for Web Development</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">8 Ways to Increase the Readibility and Beautify your HTML Code</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">12 Insanely Awesome Javascript Effects</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span style="display: none;" class="caption">10 New jQuery Plugins You Have to Know</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">20 Firefox Plug-ins for Web Designers and Developers</span></a>

        <a style="opacity: 1;" class="item" href="#" title="">
        <img src="#" width="190" height="120">
        <span class="caption">12 Amazing and Creative Javascript Games</span></a>
    </div>
</div>
</section>

ext.js

$(document).ready(function () {

//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
    title = $(this).attr('title');
    $(this).append('<span class="caption">' + title + '</span>');  
    $(this).attr('title','');
});

$('#items .item').hover(
    function () {
        //set the opacity of all siblings
        $(this).siblings().css({'opacity': '0.2'});

        //set the opacity of current item to full, and add the effect class
        $(this).css({'opacity': '1.0'}).addClass('effect');

        //show the caption
        $(this).children('.caption').show();   
    },
    function () {
        //hide the caption
        $(this).children('.caption').hide();       
    }
);

$('#items').mouseleave(function () {
    //reset all the opacity to full and remove effect class
    $(this).children().fadeTo('100', '1.0').removeClass('effect');     
});   
});

动态页面.js

$(document).ready(function () {


$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');
});
});

如果您能帮我找出发生这种情况的原因，我将不胜感激。

在此先感谢，harris21

*编辑： *我的动态菜单工作正常，问题是 ext.js 脚本不工作。

4

3 回答 3

16

如果您使用的是最新版本的 jQuery（1.7+），请尝试使用 on()，如果是旧版本，请尝试使用 delegate()，而不仅仅是 hover()

像这样：

$("#main-content").on("mouseenter", "#items .item", function(event){
// your function
}).on("mouseleave", "#items .item", function(event){
// your function
});

见：http ://api.jquery.com/on/

于 2012-08-02T02:11:10.270 回答
0

处理动态内容时，请务必使用jquery.on（较新版本的 live）。

$.on('click', function(){

});

代替

$.click(function(){});
于 2012-08-02T02:11:55.980 回答
0

我找到了一些解决这个问题的方法。

$(document).on("mousemove",".objectclass",function(){
   console.log("mousemove");
});

它工作正常！

于 2014-03-29T20:18:48.410 回答