Javascript 如何防止jQuery UI效果触发两次

我试图使用jQueryUI的效果向用户显示与一些单选按钮选择相对应的解释。但效果会触发两次，即相关页面组件会闪烁两次而不是一次

我看过类似的问题，但它们要么有，要么有。（或回答/评论要求提供更多细节或从未给出的示例。）

用我的问题的简化版本

如果单击其中一个单选按钮，相应的段落将以绿色闪烁两次。从JS部分可以看出，上面第二个链接中提出的解决方案（使用

.off（'click'）。on（'click'）

）来防止“克隆”效应）似乎没有什么区别

我正在使用jQuery1.8.0和jQueryUI1.8.22（JSFIDLE分别使用1.7.2和1.8.18，并且有相同的问题），Opera、Chrome和Firefox上也会出现同样的情况

---

我如何解决这个问题，并使效果只执行一次？如果有一个解决方案，很乐意使用它。

问题是会触发两个单击事件，一个用于

标签，一个用于
输入。这是因为点击标签“触发”点击输入。更改选择器以防止出现这种情况：

    $('#labelChoice1 input').click(function(e) {
        highlightDiv(1);
    });
    $('#labelChoice2 input').click(function(e) {
        highlightDiv(2);
    });

这是问题所在。
问题在于触发了两个单击事件，一个是针对
标签的，一个是针对
输入的。这是因为点击标签“触发”点击输入。更改选择器以防止出现这种情况：

    $('#labelChoice1 input').click(function(e) {
        highlightDiv(1);
    });
    $('#labelChoice2 input').click(function(e) {
        highlightDiv(2);
    });

这是一个更具扩展性的版本，可能如下所示：

function highlightDiv(index) {
    $('p#explanation' + index).effect("highlight", {color: '#00ff00'}, 1000);
}

$(':radio').each(function(i) {
    $(this).click(function() {
        // zero-based index
        highlightDiv(i + 1);      
    });
});
​

更具扩展性的版本可能如下所示：

function highlightDiv(index) {
    $('p#explanation' + index).effect("highlight", {color: '#00ff00'}, 1000);
}

$(':radio').each(function(i) {
    $(this).click(function() {
        // zero-based index
        highlightDiv(i + 1);      
    });
});
​

这似乎效果不错

$('#labelChoice2').on('click', '#choice2', function() {
    highlightDiv(2);
});

第二个参数基本上只是说明该方法应该应用于#labelChoice2的哪些子级，在jsfiddle上尝试它表明该解决方案有效
这似乎很好

$('#labelChoice2').on('click', '#choice2', function() {
    highlightDiv(2);
});

第二个参数基本上只是说明该方法应该应用于#labelChoice2的哪些子项，在JSFIDLE上试用表明该解决方案有效
当我单击第一个收音机时，第一段按预期闪烁一次..当我单击第一个收音机时，第一段按预期闪烁一次..谢谢大家，该解决方案和解释正是我所追求的：-）感谢heaps，该解决方案和解释正是我所追求的：-）在重构更多单选按钮之前，我想先让它工作，但你的代码将节省我的精力，cheers:-）顺便问一下，您为什么要在document ready事件之外设置click函数？这意味着所有操作DOM的代码都应该在onReady回调中，所以这纯粹是为了减少示例中的代码量。明白了，我只是想知道，因为我注意到你也把它移到了JSFIDLE中。谢谢，伙计。在重构更多单选按钮之前，我想先让它工作，但你的代码可以帮我省去这项工作，干杯：-）顺便问一下，你为什么要在document ready事件之外设置click函数？这意味着所有操作DOM的代码都应该在onReady回调中，所以这纯粹是为了减少示例中的代码量。明白了，我只是想知道，因为我注意到您也将其移出了JSFIDLE。谢谢，伙计。我会选择Sidhart的解决方案和Matt重构的一个版本，但是感谢另一个有用的选项，我不知道你可以指定那个参数。我会选择Sidhart的解决方案和Matt重构的一个版本，但是感谢另一个有用的选项，我不知道你可以指定那个参数。