触发 document.ready() 后检测 DOM 更改答案

【问题标题】：detect DOM changes once document.ready() is fired触发 document.ready() 后检测 DOM 更改
【发布时间】：2011-10-06 11:26:10
【问题描述】：

我在$(document).ready 中有这个函数

$('.roundabout-in-focus').click(function(){
    $(this).css({position:'absolute',height:'300px',width:'400px',left:'120px',top:'-20px'});
});

效果很好，

问题是当用户单击另一个元素时，具有'.roundabout-in-focus' 类的元素会因为插件而发生变化。

假设文件准备好了

<ul>
<li class="roundabout-in-focus">me first</li>
<li>me next</li>
</ul>

如果用户点击下一个<li>

<ul>
<li>me first</li>
<li class="roundabout-in-focus">me next</li>
</ul>

但我一开始写的 click 函数总是适用于同一个元素，即首先具有类的元素。

如何更新哪个元素具有该类？

【问题讨论】：

该类是否已从原始<li> 中删除？
是的，确实如此。我不知道为什么仍在应用相同的项目：S
使用firebug，点击第一个<li>后的代码是什么样子的？
非常类似于我在问题中发布的代码
也许您可以发布确切的代码。因为我非常怀疑萤火虫会显示<li class=".roundabout-in-focus">，因为它没有正确标记。

标签： jquery class click document-ready

【解决方案1】：

$("ul").delegate("li.roundabout-in-focus", "click", function() {
   $(this).css({position:'absolute',height:'300px',width:'400px',left:'120px',top:'-20px'});
});

或者只是

$('.roundabout-in-focus').live("click", function(){
    $(this).css({position:'absolute',height:'300px',width:'400px',left:'120px',top:'-20px'});
});

对不起，我也没有测试过.. 但他们应该工作

【讨论】：