动态选择

Question

我有一个类似的代码，在那里我指定功能的点击甚至改变风格

$(".style1, .style2", "#section").click(function() { 
    changeStyle($(this)); 
}); 

它可能发生，从STYLE1到蓝紫魅力的项目变化，所以项目应该仍然是可点击的，但这些操作不会生效。似乎项目列表$（“。style1，.style2”，“＃section”）是在加载时创建的，并且当我将阶梯更改为包含新元素时不会更新。

我试图把粘贴的代码放到一个功能，并在功能changeStyle结束调用它，但是这增加了另一种触发因素，所以当我在其他项目单击与style1或style2，动作触发2，3 ， 4次。而我只有一次触发一次。

我该如何解决？

感谢您的帮助。

Answer 1

我不完全理解你的问题，但它听起来像你正在创建新的元素，并动态地为它们动态添加事件处理程序。

如果这是您的问题，您只需要使用.delegate()，这将确保事件处理程序在页面生命周期的后期与现有和动态创建的元素相连。这样，每次创建元素时都不必一直分配事件处理程序。

$('#section').delegate('.style1,.style2', 'click', function() { 
    changeStyle($(this)); 
}); 

此外，您changeStyle()功能听起来似乎可以受益于.toggleClass()很多或者类似的jQuery函数。

Answer 2

尝试改变你的'点击'使用的生活。因此，

$(".style1, .style2", "#section").live("click", function (e) { 
    changeStyle($(e.target)); 
}); 

Live意味着选择器测试是在点击而不是在页面加载时完成的。你可以在这里看到文档：http://api.jquery.com/live/