Jqueryのonclickがidのために動作しない#stopbar

誰かが#stopbarをクリックしたときに#playerが消滅しない理由を知っていますか？私は.thumbをクリックして#playerを表示することができますが、それを消すことは機能しません。 #stopbar上http://neroedge.shiftarch.com/Jqueryのonclickがidのために動作しない#stopbar

<!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;"/>

出典

2011-12-29 CyanPrime

を使用でき.live()代わりの.click()：

は、ここでのアクションで、それへのリンクです。ページがレンダリングされた後に#stopbarのhtmlを追加すると、動作しません。

出典

2011-12-29 08:51:24 AndersDaniel

ネヴァーマインド、私はそれが動作するようになりました。ありがとうございました。 – CyanPrime

ページに#stopbarを動的に書き込んでいますが、実行時に1回バインドするだけです。

動的に作成するものであっても、すべての#stopbarsでこれを行う方法については、delegate()（またはjQuery 1.7以降ではon()）を参照してください。

情報：http://api.jquery.com/on/

例：

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

出典

2011-12-29 08:55:31 Interrobang

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

出典

2011-12-29 08:57:37 gloot

Jqueryのonclickがidのために動作しない#stopbar

答えて

関連する問題