如何動態替換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。

提取物：

「委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。通過挑選這是保證出席委派的事件處理程序連接時的元素，你可以使用委託的事件，以避免需要經常重視和移除事件處理程序。」