如何动态替换HTML标签，而不会丢失事件

Question

我有一个HTML UL标签在那里我有这样的事情：

<div id="sidebar"> 
    <ul id="menu"> 
     <li> 
      <div id="clickable"> 
       <img src="img/img8.png" alt="Descripción de la igen 8.png">/img> 
      </div> 
     </li> 
     <li> 
      <div id="clickable"> 
       <img src="img/img10.png" alt="Descripción de la imagen 10"></img> 
      </div> 
     </li> 
    </ul> 
</div> 

这是一种常见的列表，即表现为一个滑块。正如你所看到的，每个图像都在div内，你可以点击并在另一个div中显示它。

好吧，我有这个oter列表：

<div id="seleccion_galeria">Selecciona la secci&oacute;n que te gustar&iacute;a visualizar:</div> 
      <div id="lista_galerias"> 
       <ul> 
        <li><div id="escaparates_show">Escaparates</div> 
         <script type="text/javascript"> 
          $('#escaparates_show').click(function() 
          { 
           console.log('clicked'); 
           $('#menu').html(''); 
           $('<li><div id="clickable"><img src="img/img8.png" alt="Descripción de la imagen 8."></img></div></li><li><div id="clickable"><img src="img/img10.png" alt="Descripción de la imagen 10"></img></div></li><li><div id="clickable"><img src="img/img13.png" alt="Descripción de la imagen 13"></img></div></li><li><div id="clickable"><img src="img/img15.png" alt="Descripción de la imagen 15"></img></div></li><li><div id="clickable"><img src="img/img20.png" alt="Descripción de la imagen 20"></img></div></li>') 
            .prependTo('#menu'); 
           $('#galeria_seleccionada').html('Escaparates'); 
          }); 
         </script> 
        </li> 
        <li><div id="decoracion_show">Decoraci&oacute;n</div> 
         <script type="text/javascript"> 
          $('#decoracion_show').click(function() 
          { 
           console.log('clicked'); 
           $('#menu').html(''); 
           $('<li><div id="clickable"><img src="img/img8.png" alt="Descripción de la imagen 8."></img></div></li><li><div id="clickable"><img src="img/img10.png" alt="Descripción de la imagen 10"></img></div></li>') 
            .prependTo('#menu'); 
           $('#galeria_seleccionada').html('Decoración'); 
          }); 
         </script> 
        </li> 
    </ul> 
</div> 

这是表明，该最后一个列表中的每个元素包含可能的图像列表。当我点击列表中的每个元素时，它将删除第一个“#menu”列表的html，并将其替换为我希望的内容。这样，我可以显示不同的图像列表，可以在另一个div上点击和展开。

问题是，当我将新内容替换为新列表时，它完美地显示了新的图像列表，但它不会继承“可点击的”事件，因此我第一次用HTML标签，它失去了它的可点击。

任何人都可以知道为什么会发生这种情况？

谢谢！

编辑：

对于同样的问题，我有这样的jQuery的事件：

$('#menu').on("hover", '#menu li', 
function() {  
//mouse over LI and look for A element for transition 
$(this).find('img') 
    .animate({ opacity:1 }, 200) 
}); 

它适用于所有在继承的元素，但我不能让“鼠标离开”事件继承。如果我添加：

 $('#menu').on("hover", '#menu li', 
    function() {  
     //mouse over LI and look for A element for transition 
     $(this).find('img') 
      .animate({ opacity:1 }, 200) 
    }, 
    function() { 
     $(this).find('img') 
      .animate({ opacity:0.5 }, 200) 
    }); 

它不起作用。它如何为悬停onleave事件？

Answer 1

$('.clickable').live('click',function(){ 
     //do stuff here 
    }); 
OR 

$('body').delegate('.clickable','click',function(){ 
    //do stuff here 
}); 

Answer 2

当您从DOM中删除元素时，绑定到该元素的任何事件处理程序将不再起作用。您需要使用事件委托来将事件处理程序绑定到始终位于DOM中的祖先元素。你可以用on方法做到这一点：

$("#menu").on("click", ".clickable", function() { 
    //Do stuff 
}); 

这将绑定的事件处理程序父ul元素。由于大多数DOM事件都会在树上冒泡，因此可以在祖先元素上捕获它们。当事件到达ul时，on方法将检查它是否源自与选择器匹配的元素。如果有，事件处理程序将被执行。

这有附加好处，只有一个事件处理程序而不是许多（每个.clickable元素一个），这是更有效的。

Answer 3

使用.on方法来绑定您的事件，这允许事件委托。请参阅here。

提取物：

“委托事件有优势，他们可以处理来自被添加到该文件在稍后的时间后代元素的事件。通过挑选这是保证出席委派的事件处理程序连接时的元素，你可以使用委托的事件，以避免需要经常重视和移除事件处理程序。”