어떻게 이런 식으로 뭔가를 내가 HTML <i> UL에게</i> 태그를 가지고

Question

잃지 이벤트없이 동적으로 HTML 태그를 대체합니다. 보시다시피, 각 이미지는 div 안에 있으며 여기를 클릭하여 다른 div에 표시 할 수 있습니다.

<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> 

이이 마지막 목록의 각 요소에 포함 된 가능한 이미지를 보여줍니다 목록입니다 : 좋아

, 나는이를 oter 목록을 가지고있다. 목록의 각 요소를 클릭하면 첫 번째 ul "#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) 
}); 

그것은 모든 inheritated 요소 작동하지만, 나는 "하는 MouseLeave"이벤트가 상속 할 수 없습니다. 추가 한 경우 :

 $('#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을 참조하십시오.

추출 :

"위임 된 사건들이 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수있는 장점이 있습니다.위임 된 이벤트 처리기가 연결되는 시점에 존재하는 것으로 보장된다 요소를 선택하여, 자주 연결하고 이벤트 핸들러를 제거 할 필요성을 피하기 위해 위임 된 이벤트를 사용할 수 있습니다. "