Question

我正在尝试使用jQuery UI中的highlight效果向用户显示与某些单选按钮选项相对应的解释。但效果会触发两次，即相关的页面组件闪烁两次而不是一次。

我看过类似的问题，但他们要么solutions that don't apply to my case要么solution that doesn't work in my case。（或者答案/评论要求提供更多细节或一个从未给出的例子。）

Here is a jsfiddle我的问题的简化版本。

如果单击其中一个单选按钮，相应的段落将闪烁绿色两次。从JS部分可以看出，上面第二个链接中提出的解决方案（使用.off('click').on('click')来防止“克隆”效果）似乎没有什么区别。

我正在使用jQuery 1.8.0和jQuery UI 1.8.22（jsfiddle分别使用1.7.2和1.8.18，并且具有相同的问题），在Opera，Chrome和Firefox上也会发生同样的事情。 / p>

我如何解决这个问题，并且效果只执行一次？很高兴使用解决方法，如果有...

Answer 1

问题是触发了2次点击事件，一次针对label，一次针对input。这是因为单击标签会“触发”对输入的单击。更改您的选择器以防止这种情况：

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

这是updated fiddle。

Answer 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);      
    });
});

<强> http://jsfiddle.net/a7kRB/5/

Answer 3

这似乎工作得很好

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

第二个参数基本上只是说明#glassChoice2的子子应该应用的方法，在jsfiddle上尝试它会显示这个解决方案有效

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

3 个答案: