0

我有一个 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 中显示它。

好的，我有这个其他列表：

<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 事件？

4

3 回答 3

2

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

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

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

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

于 2012-06-12T09:06:42.510 回答
1 
    $('.clickable').live('click',function(){
      //do stuff here
    });
OR

$('body').delegate('.clickable','click',function(){
  //do stuff here
});
于 2012-06-12T09:08:36.520 回答
0

使用 .on 方法绑定您的事件，这允许事件委托。见这里。

提炼：

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

于 2012-06-12T09:06:54.067 回答