623715427 623715427 - 1 month ago 5
jQuery Question

jQuery .click() didn't work

This is the story:
After I finished my picture carousel and navigation bar, I decided to put a click event on the "home" (to remove the picture carousel and display other items). But the

click()
didn't work .

To be more precise, I'm sure that the
click()
has been working (after I clicked "Home", it disappeared for an instant).

I had tried to replace
remove()
with
css("display","none")
or
empty()
, but the results were the same.

This is the code:

<!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>

Answer

I tried to paste your code and the first thing I notice is that you want to prevent the default action of the anchor link. That way it doesn't "flash" the screen.

So what exactly are you trying to do? Just remove the #container element?

$("#home").click(function(event){
    event.preventDefault();
    // $("#container").css("height","100px");  
    // this is my test,it works but just for an instant
    $("#container").remove();
});