jquery中的动态选择器

Question

我有一个类似于此的代码，我在其中为单击指定一个函数，即使更改样式

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

可能会发生项目从style1更改为style2，因此该项目仍应可单击，但操作不会生效。似乎项目列表$（“。style1，.style2”，“＃section”）是在加载时创建的，并且在我将窗框更改为包含新元素时不会更新。

我尝试将粘贴的代码放入函数中并在函数changeStyle的末尾调用它，但这会添加另一个触发器，因此当我点击其他项目style1或{ {1}}，动作触发2,3,4，...次。我只想触发一次。

我该如何解决？

感谢您的帮助。

Answer 1

尝试更改您对“点击”的使用。所以，

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

实时表示选择器测试是在点击而不是页面加载时完成的。您可以在此处查看文档：{​​{3}}

Answer 2

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

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

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

此外，您的changeStyle()函数听起来可以从.toggleClass()或类似的jQuery函数中获益良多。