Question

任何人都知道为什么当我点击#stopbar时#player不会消失？我可以点击.thumb并让#player显示出来，但让它消失却不起作用。

以下是该行动的链接：http://neroedge.shiftarch.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>NeroEdge</title> 
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var ids = new Array("U61s9-SzrtQ","Volvo","BMW");
            var photoNum = 0;
            var maxPhotos = 4;
            var maxDisplay = 4; //must be able to /2

            function getTempVar(i){
                var temp = i;

                if(temp < 0) temp += maxPhotos;
                if(temp >= maxPhotos) temp -= maxPhotos;

                return temp;
            }

            function getGallery(){
                $("#gallery").empty();
                var temp = photoNum - (maxDisplay/2);

                for(var i = 0; i < maxDisplay; i += 1){
                    temp += 1;
                    var v = getTempVar(temp);
                    $("#gallery").append("<img class=\"thumb\" src=\"/images/gallery/thumb/"+v+".png\" alt=\""+ids[v]+"\" />");
                }
            }

            getGallery();

            $("#leftbutton").click(function(){
                photoNum -= 1;

                if(photoNum < 0) photoNum = maxPhotos - 1;
                getGallery();
            });

            $("#rightbutton").click(function(){
                photoNum += 1;

                if(photoNum >= maxPhotos) photoNum = 0;
                getGallery();
            });

            $(".thumb").click(function(){
                $("#player").css("display","block");
                $("#player").css("position","absolute");
                $("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
                $("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
                $("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
            });

            $("#stopbar").click(function(){
                $("#player").css("display","none");
                $("#player").css("position","absolute");
                $("#player").css("top", "0px");
                $("#player").css("left", "0px");
                $("#player").html("<div id=\"stopbar\">Press this to close video</div>");
            });
        });
        </script>

        </head>

    <body>

        <div id="player">
            <div id="stopbar">Press this to close video</div>
        </div>

        <div id="wrap">
            <div id="banner">
                <img src="images/banner.png" alt="NeroEdge" />
            </div>

            <div id="main">

                <div id="navibar">
                    <div id="title">NeroEdge - By William Starkovich</div>
                    <div id="tester">Become a Tester</div>
                </div>

                <br />

                <div id="bigcolumn">
                    <div id="gallerywrap">
                        <a href="#" id="leftbutton"><img id="lbutton" src="/images/gallery/left.png" alt="Left Button" /></a>
                        <div id="gallery">Gallery not loaded.</div>
                        <a href="#" id="rightbutton"><img id="rbutton" src="/images/gallery/right.png" alt="Right Button" /></a>
                    </div>

                    <br />
                    <br />
                    <br />
                    <br />

                    <hr style="width: 80%; color: #00ffff;"/>

Answer 1

您可以在.live()上使用.click()代替#stopbar。在页面呈现后添加#stopbar的html，这就是为什么它不起作用。

Answer 2

您正在动态地将#stopbar写入页面，但仅在运行时绑定到它一次。

查看delegate()（或jQuery 1.7+中的on()），了解如何为所有#stopbars执行此操作，甚至是动态创建的#stopbars。

信息：http://api.jquery.com/on/

示例：

$('body').on('click', '#stopbar', function() { ... });

Answer 3

$(".thumb").click(function(){
    $("#player").css("display","block");
    $("#player").css("position","absolute");
    $("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
    $("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
    $("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
});

Jquery onclick不适用于id #stopbar

3 个答案: