Jquery - 加载动态内容时的悬停效果不起作用 - 使用hastags的URI [英] Jquery - Hover effect not working when loading dynamic content - URI with hastags

问题描述

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

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

我已经我的研究发现，当新的URI被加载时，悬停效果停止工作。

index.php

  ; section id =main-content> 
< div id =guts> 
< div id =items> 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span style =display：none; class =caption> 8极度< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 8物理和重力仿真的惊人的Javascript实验< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 8令人难以置信的Wordpress插件< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 9必须知道的Web CSS工具< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span style =display：none; class =caption> 10图片库jQuery Script with Thumbnail Filmstrip< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span style =display：none; class =caption>具有创意Javascript效果的单页网站< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 13用于Web开发的简单但有用的在线工具< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 8增加可读性并美化HTML代码的方法< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 12疯狂的令人敬畏的Javascript效果< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span style =display：none; class =caption> 10您必须知道的新的jQuery插件< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 20 Web设计师和开发人员的Firefox插件< / span>< / a> 
 
< a style =opacity：1; class =itemhref =＃title => 
< img src =＃width =190height =120> 
< span class =caption> 12令人惊奇和创意的Javascript游戏< / span>< / a> 
< / div> 
< / div> 
< / section> 
  

ext.js

  $（document）.ready（function（）{
 
 //循环遍历#items中的所有子项
 //将标题值保存到一个span，然后删除标题的值，以避免工具提示
 $（'＃items .item'）。each（function（）{
 title = $ （this）.attr（'title'）; 
 $（this）.append（'< span class =caption>'+ title +'< / span>'）; 
 $（this）.attr（'title'，''）; 
}）; 
 
 $（'＃items .item'）。hover（
 function 
 //设置所有兄弟姐妹的不透明度
 $（this）.siblings（）。css（{'opacity'：'0.2'}）; 
 
 //设置并且添加效果类
 $（this）.css（{'opacity'：'1.0'}）addClass（'effect'）; 
 
 / /显示标题
 $（this）.children（'。caption'）。show（）; 
}，
 function（）{
 //隐藏caption 
 $（this）.children（'。caption'）。hide（）; 
} 
）; 
 
 $（'＃items'）。mouseleave（function（）{
 //将所有的透明度全部重置并删除效果类
 $（this）.children（） .fadeTo（'100'，'1.0'）。removeClass（'effect'）; 
}）; 
}）; 
  

dynamicpage.js

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $


$（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（） b $ b $ mainContent.hide（）。load（newHash +#guts，function（）{
$ m ainContent.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脚本不起作用。

解决方案

如果您使用的是最近版本的jQuery（1.7+）或delegate（），如果它的旧版本，而不是只是hover（）

像这样：

$ b $ （mouseent，#items .item，function（event）{
/ /你的函数
}）。on（mouseleave，#items .item，function（event）{
//你的函数
}）;

请参阅： http://api.jquery.com/on/

I am currently working the front-end on a website. I am using jquery in order to create a dynamic content.

My problem is that when I type my URI (localhost/jquery/myfile/) and the index.php loads, my jquery script works, but when I click on my navigation bar and my #index.php is placed in the URI (localhost/jquery/myfile/#index.php) one of my js scripts, the one with the hover effect, doesn't work (but all my other js files work, such as my nav menu script which includes a hover effect as well).

I have made my research and found out that when the new URI is loaded, hover effect stops working.

index.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');     
});   
});

dynamicpage.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');
});
});

I would really appreciate if you could help me find why this is happening.

Thanks in advance, harris21

*edit:*My dynamic menu is working fine, the problem is that the the ext.js script is not working.

解决方案

Try using on() if you are using a recent version of jQuery (1.7+), or delegate() if its an older version, instead of just hover()

Like this:

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

See: http://api.jquery.com/on/

这篇关于Jquery - 加载动态内容时的悬停效果不起作用 - 使用hastags的URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！