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>

这是一个列表，显示最后一个列表的每个元素包含的可能图像。当我单击列表中的每个元素时，它会删除第一个 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)
});

它适用于所有继承的元素，但我不能使“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

从DOM中删除元素时，绑定到该元素的任何事件处理程序将不再起作用。您需要使用事件委派将事件处理程序绑定到始终位于DOM中的祖先元素。您可以使用on方法执行此操作：

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

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

这样做的另一个好处是只有一个事件处理程序而不是多个（每个.clickable元素一个），这样效率更高。

Answer 2

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

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

Answer 3

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

提取物：

“委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序。“

如何动态替换HTML标记而不丢失事件

3 个答案: