jQuery .click()不起作用
jQuery .click() didn't work
故事是这样的:在我完成了我的图片旋转木马和导航栏后，我决定在"home"上添加一个点击事件(删除图片旋转木马并显示其他项目)。但是click()没有工作。
更准确地说，我确信click()一直在工作(在我点击"Home"后，它消失了一会儿)。
我曾尝试用css("display","none")或empty()代替remove()，但结果是一样的。
这是代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitle</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Bluefish 2.2.7" />
<link type="text/css" rel="stylesheet" href="slider.css" />
</head>
<body>
<div id="head">
<ul>
<li id="home"><a href="" class="a1">Home</a></li>
<li class="topnav a1">
<a href="" class="a1">Fortunate</a>
<ul class="subnav">
<li><a href="#" class="menu">A</a></li>
<li><a href="#" class="menu">B</a></li>
<li><a href="#" class="menu">C</a></li>
</ul>
</li>
<li><a href="" class="a1">Breed</a></li>
<li><a href="" class="a1">Market</a></li>
<li><a href="" class="a1">Box</a></li>
<li><a href="" class="a1">Message</a></li>
</ul>
</div>
<div id="container">
<ul id="picList">
<li><img src="1.jpg" alt="" class="a"></li>
<li><img src="2.jpg" alt="" class="a"></li>
<li><img src="3.jpg" alt="" class="a"></li>
<li><img src="4.jpg" alt="" class="a"></li>
<img src="prev.png" alt="" class="prev">
<img src="next.png" alt="" class="next">
</div>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" src="myFunc.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
var maxWidth=document.body.clientWidth;
(function () { //picture carousel
$("#container,img.a").css("width",maxWidth)
var intervalObj=window.setInterval(next,3000);
var picArr=$("#picList li");
$("#picList").css("width",picArr.length*maxWidth);
function next(){
$("#picList li:first-child").animate({
marginLeft:-maxWidth
},1000,function(){
var temp=$(this).clone();
$(this).remove();
temp.css({marginLeft:"0"});
$("#picList").append(temp);
});
}
function prev(){
var temp=$("#picList li:last-child").clone();
$("#picList li:last-child").remove();
temp.css({marginLeft:-maxWidth});
$("#picList").prepend(temp);
$("#picList li:first-child").animate({
marginLeft:"0"
},1000);
}
$("img.prev").bind("click",function(){ prev();}).hide();
$("img.next").bind("click",function(){ next();}).hide();
$("#container").mouseover(function(){
$("img.prev,img.next").show();
window.clearInterval(intervalObj);
});
$("#container").mouseout(function(){
$("img.prev,img.next").hide();
intervalObj=window.setInterval(next,2000);
});
})();
(function(){ $("ul.subnav").hide();
$(".topnav").hover(function(){
$(".subnav").slideDown();} //menu slideDown
,function(){$(".subnav").slideUp();});
})();
$("#home").click(function(){
// $("#container").css("height","100px");
// this is my test,it works but just for an instant
$("#container").remove();
});
});
</script>
我试着粘贴你的代码，我注意到的第一件事是你想要防止锚链接的默认动作。这样它就不会在屏幕上"闪烁"。
那你到底想做什么?只是删除#container元素?
$("#home").click(function(event){
event.preventDefault();
// $("#container").css("height","100px");
// this is my test,it works but just for an instant
$("#container").remove();
});
点击链接将重新加载页面。因此，要想看到想要的结果
，必须先防止出现这种情况 $("#home a").on("click",function(e){
e.preventDefault();
$("#container").hide(); //or remove
//other codes if necessary
});
我有点心不在焉(阅读很无聊)，并对你的carrousel设置进行了全面重写，使其更具可读性并对其进行了优化，当然，我修复了删除。
看一下:https://jsfiddle.net/849wg8wv/
代码:$(document).ready(function(){
function Carrousel(container, maxWidth, pictures) {
var self = this,
ul = $('<ul></ul>'),
interval = 3000,
intervalObj,
animationDuration = 1000,
listItems = [],
prevBtn = $('<button class="prev">previous</button>'),
nextBtn = $('<button class="next">next</button>');
prevBtn.hide();
nextBtn.hide();
container.append(ul);
pictures.forEach(function(src) {
var li = $('<li></li>'),
img = $('<img src="'+src+'"></img>');
img.css('width', maxWidth);
li.append(img);
ul.append(li);
listItems.push(li);
});
ul.css('width', listItems.length * maxWidth);
ul.append(prevBtn);
ul.append(nextBtn);
this.next = function () {
var firstSlide = listItems[0],
lastSlide = listItems[listItems.length-1];
firstSlide.animate(
{ marginLeft: -maxWidth },
animationDuration,
function () {
firstSlide.detach().insertAfter(lastSlide);
firstSlide.css({ marginLeft: 0} );
listItems.shift();
listItems.push(firstSlide);
}
);
}
this.prev = function(){
var firstSlide = listItems[0],
lastSlide = listItems[listItems.length-1];
lastSlide.animate(
{ marginLeft: -maxWidth },
animationDuration,
function () {
lastSlide.detach().insertBefore(firstSlide);
lastSlide.css({ marginLeft: 0 })
listItems.pop();
listItems.unshift(lastSlide);
}
);
}
this.remove = function () {
clearInterval(intervalObj);
container.remove();
}
this.start = function () {
intervalObj = setInterval(self.next, interval);
}
this.stop = function () {
clearInterval(intervalObj);
}
prevBtn.bind('click', self.prev);
nextBtn.bind('click', self.next);
container.mouseover(function() {
prevBtn.show();
nextBtn.show();
self.stop();
});
container.mouseout(function () {
prevBtn.hide();
nextBtn.hide();
self.start();
});
this.start();
};
var carousel = new Carrousel(
$('#container'),
300,
[
'http://www.relatably.com/m/img/funniest-cat-memes/cat-memes-10.png',
'http://www.relatably.com/m/img/funniest-cat-memes/Top-30-Funny-Cat-Memes-Hilarious.jpg',
'http://www.relatably.com/m/img/funniest-cat-memes/Funny-Cat-Pictures-with-Captions-25.jpg',
'http://www.relatably.com/m/img/funniest-cat-memes/Funny-Cat-Meme-Work-1.jpg'
]
);
$("#home").on('click', function(e){
e.preventDefault();
carousel.remove();
});
});
相关文章：
- document.getElementById(“st”）.click(）;不起作用
- 追加Jquery后的Binding Click事件不起作用
- addEventListener 在 Javascript 中不起作用，但 jQuery Click 正在工作
- click(） 在 rails 3.2.1 中不起作用 - 自动点击
- JQuery 和 Typescript click(） 不起作用
- window.onload和.click(）在ie9中不起作用
- $(document）.click(）在chrome扩展中不起作用
- DomElement.click(） 事件在 chrome 中不起作用，但其他事件可以工作
- .slideToggle-on.click功能不起作用
- ng-click在IE中不起作用，但在CHROME中工作正常
- Javascript on click事件在函数中不起作用，但在document.ready(）中起作用
- 为什么asp按钮的java脚本click(）函数在chrome浏览器中不起作用
- jquery.click(）在Ajax 403响应后不起作用
- 为什么$('#id'）.click函数不起作用
- jQuery .click 在动态加载按钮上不起作用
- jQuery在Click上不起作用
- Jquery.Click(） 在使用一次后不起作用
- jquery .click(） 事件不起作用
- ng-click在火狐中不起作用
- 重复的按钮不起作用 click(）;
