切换弹出DIV标签不起作用

Question

我正在尝试制作一个包含几个div的简单页面，如果单击一个div，它将移动到中心并变大（其他div在背景中仍然可见）。 当您单击在背景中可见的另一个div时，位于中心的div将返回到之前的位置，然后单击div将转到中心并调整大小。 同样，如果单击中心的div，它应该回到之前的位置。 我为此制作了一个Jquery脚本，但是它无法正常工作-第一次单击任何div都可以正常工作，但随后单击的任何内容都将停止工作。 这是带有某些样式的html：

<style>
#outside1 {background-color:gray;}   #outside2 {background-color:blue;}        #outside3 {background-color:brown;}
#inside1 {background-color:red;}     #inside2 {background-color:green;}   
#inside3 {background-color:pink;}    #inside4 {background-color:yellow;}
#inside5 {background-color:gold;}    #inside6 {background-color:silver;}

.outside {width:100px; height:90px; margin:5px; }   .inside {display:none; margin:2px;  }
#test1 {height:400px; }
</style>


<div id=test1>
<div id='outside1' class='outside'> div outside 1 <br/>
<div id='inside1' class='inside'> div inside 1 <br/>   </div>
<div id='inside2' class='inside'> div inside 2 <br/>   </div>
</div> 

<div id='outside2' class='outside'> div outside 2 <br/>
<div id='inside3' class='inside'> div inside 3 <br/>   </div>
<div id='inside4' class='inside'> div inside 4 <br/>   </div>
</div> 

<div id='outside3' class='outside'> div outside 2 <br/>
<div id='inside5' class='inside'> div inside 3 <br/>   </div>
<div id='inside6' class='inside'> div inside 4 <br/>   </div>
</div> 

</div>    

那就是一些js和jquery：

kd_small={top: 0, left: 0,  opacity: 1, width:100, height:90 } ;
kd_big = {top: -90, left: +50,  opacity: 1, width:200, height:150 };
var t=0; 

function hextend(d){
  d.animate(kd_big);       d.find('div').show();        $('.outside').off();   
  var sbs=$(d).siblings();  $(sbs).off(); sbs.append('i am siblings');      
  d.append('I AM CLICKED');   hshrink($(sbs));   
  d.on('click', function (){ hshrink($(d));   });
  $(sbs).on('click', function (){ hextend($(sbs));   });
}

function hshrink(s){
 s.find('div').hide(); s.animate(kd_small);    
}

$('.outside').on('click', function(){
  hextend($(this) ); 
});

$('.inside').on('click', function(e){
  e.stopPropagation();  $(this).html('inside div clicked' + t +'times');  
  t++;  
});

谢谢

Answer 1

在添加div时，不要使用.on('click'而是使用delegate('click'或`.live（'click'）。

但是，.live和.delegate都已被取代，因此我认为这将是一个“快速修复”。

再次查看代码，我认为您可能必须使用“ addClass”将正确的类添加到要附加的div中，并在元素居中后使用控制台检查元素，并确保元素存在类。