Question

I’ve got an html ul tag where I have something like this:

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

This is a common list, that is showed as a slider. As you can see, each image is inside a div where you can click and show it in another div.

Ok, I have this oter list:

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

This is a list that shows the possible images that each element of this last list contains. When I click each element on the list, it erases the html of the first ul “#menu” list and substitutes it for the content I wish. With that, I can show diferent lists of images clickable and expandable on another div.

The problem is that, when I substitute the content for the new list, it shows the new list of images perfectly, but it doesn’t inherit the “clickable” event, so the first time I substitute the HTML tag, it looses it’s clickable.

Anyone can have an idea why does this happen?

Thanks!

Edit:

For the same problem, I have this jquery event:

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

It works for all the inheritated elements, but I can’t make the “mouseleave” event to inherit. If I add:

        $('#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)
    });

It doesn’t work. How it works for the hover onleave event??

Answer 1

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

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