当加载带有hastags的动态内容-URI时,Jquery-悬停效果不起作用
Jquery - Hover effect not working when loading dynamic content - URI with hastags
我目前在一个网站的前端工作。我使用jquery是为了创建一个动态内容。
我的问题是,当我键入我的URI(localhost/jquery/myfile/)并加载index.php时,我的jquery脚本可以工作,但当我点击导航栏并将#index.php放置在URI(localhost/jquery/myfile/#index.php)中时,我有一个js脚本,即具有悬停效果的脚本,不工作(但我所有其他的js文件都可以工作,比如我的nav菜单脚本,它也包括悬停效果)。
我进行了研究,发现当加载新的URI时,悬停效果会停止工作。
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');
});
});
如果你能帮我找出为什么会发生这种事,我将不胜感激。
提前感谢,哈里斯21
*edit:*我的动态菜单工作正常,问题是ext.js脚本不工作。
如果您使用的是最新版本的jQuery(1.7+),请尝试使用on(),如果是旧版本,请尝试delegate(),而不仅仅是悬停()
像这样:
$("#main-content").on("mouseenter", "#items .item", function(event){
// your function
}).on("mouseleave", "#items .item", function(event){
// your function
});
请参阅:http://api.jquery.com/on/
使用动态内容时,请确保使用jquery.on
(live的较新版本)。
$.on('click', function(){
});
而不是
$.click(function(){});
我找到了这个问题的一些解决方案。
$(document).on("mousemove",".objectclass",function(){
console.log("mousemove");
});
它运行良好!
相关文章:
- jQuery悬停在没有鼠标悬停的情况下启动
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- jquery悬停和while循环
- 添加一个setTimeout方法会使jQuery悬停方法忽略setTimeout方法中的函数
- jQuery悬停动画只在其他类似元素中的一个元素上
- 为什么jQuery悬停方法在这种情况下不起作用
- Jquery悬停选择不起作用
- Jquery 悬停事件卡在克隆元素上
- Jquery 悬停函数在将鼠标悬停在选择框上时会失败
- Jquery悬停功能显示和隐藏元素
- Jquery 悬停以显示图像
- JQuery:悬停时文本颜色切换
- jQuery悬停滚动,只需要一点帮助
- 当加载带有hastags的动态内容-URI时,Jquery-悬停效果不起作用
- 如何防止jquery悬停效果在悬停时和悬停时激活
- 使用jQuery悬停时出现重复图像
- jQuery悬停越界
- jQuery悬停淡出p个标签,再淡出另一个标签
- Jquery悬停函数- 如何使其变得简单
- jquery悬停在图像上不起作用