jQuery .click（）无效

Question

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 . 但是click()无效。

To be more precise, I'm sure that the click() has been working (after I clicked "Home", it disappeared for an instant). 更准确地说，我确定click()一直在工作（单击“主页”后，它消失了片刻）。

I had tried to replace remove() with css("display","none") or empty() , but the results were the same. 我曾尝试用css("display","none")或empty()替换remove() empty() ，但是结果是一样的。

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 1

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? 只需删除#container元素？

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

Answer 2

Clicking the link will reload the page. 单击链接将重新加载页面。 So you have to prevent this first to see the desired result 因此，您必须先防止这种情况才能看到预期的结果

 $("#home a").on("click",function(e){
     e.preventDefault();
     $("#container").hide(); //or remove
        //other codes if necessary
  });

Answer 3

I got a little carried away (read was bored) and did a total rewrite on your carrousel setup to make it a bit more readable and optimized it, o and I fixed the remove of course. 我有点不高兴（阅读很无聊），并对您的轮播设置进行了完全重写，以使其更具可读性并对其进行了优化，我当然解决了删除问题。

Have a look: https://jsfiddle.net/849wg8wv/ 看看： https : //jsfiddle.net/849wg8wv/

Code: 码：

$(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();
});
});

jQuery .click（）无效

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-10-16 07:09:36

解决方案2
0 2016-10-16 07:19:51

解决方案3
0 2016-10-16 07:59:22

jQuery .click（）无效

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-10-16 07:09:36

解决方案2 0 2016-10-16 07:19:51

解决方案3 0 2016-10-16 07:59:22

解决方案1
0 已采纳 2016-10-16 07:09:36

解决方案2
0 2016-10-16 07:19:51

解决方案3
0 2016-10-16 07:59:22