jQuery函数必须重复才能工作

我只是进入jQuery，并注意到我的一些代码执行的方式有奇怪的行为。当我执行一个基于点击动作的函数时，该函数会第一次运行两次，点击次数为“未定义”，第二次为期望值。最终的结果是代码“工作”，但我想了解我在做什么错误导致这种意外的行为。jQuery函数必须重复才能工作

这里是我的jQuery代码：

$(function() { 

//$('#venue').buttonset().click(function(event, ui) { 
//$('#venue').buttonset().live('click', function (event, ui) { 
    $('#venue').buttonset().unbind('click').bind('click', function(event, ui) { 

    var venueName = $("input[name='venue']:checked").val(); 

    if (venueName == "venue2") { 
     alert("About to deselect, venue: " + venueName); 
     $("#meallist option[value='Dinner']").removeAttr("selected"); 
    } else { 
     alert("Doing nothing, venue: " + venueName); 
    } 
    }); 
});

注意三种不同的方式表达顶部的点击动作，从jQuery的文档，并在这个网站以前的答案的。所有结果都一样。你可以在这里尝试一下：

http://jsfiddle.net/Qaxx3/6/

感谢任何见解。我希望这是一个简单的新手错误。

来源

2012-03-07 k3davis

问题，如果你删除它工作正常 – sandeep 2012-03-07 12:24:35

您在包含输入的元素上设置了click事件。如果你直接将它放在它按预期工作的投入：

$('#venue').buttonset().find('input').click(function(event, ui) {

来源

2012-03-07 12:19:45 Andy

这个答案是最简单的，也是唯一一个不重复自身，提供期望值并维护我想要的jQuery UI元素的人。这可能更像是我问这个问题的问题，而不是其他人回答的问题 - 谢谢大家的建议。 – k3davis 2012-03-07 13:56:50

@ k3davis很高兴我能帮到你。对我来说，你的问题很清楚 – Andy 2012-03-07 14:30:28

默认情况下，您的任一个收音机都未选中。作品如果我改变源的小提琴：

<input type="radio" value="venue1" name="venue" id="venue1" checked="checked">

如果你不想或者默认选择，使用change事件和preventDefault：下面的代码在你的提琴作品：

$(function() { 
    //$('#venue').buttonset().click(function(event, ui) { 
    //$('#venue').buttonset().live('click', function (event, ui) { 
    $('#venue').buttonset().bind('change', function (event, ui) { 
     var venueName = $("input[name='venue']:checked").val(); 
     if (venueName == "venue2") { 
      alert("About to deselect, venue: " + venueName); 
      $("#meallist option[value='Dinner']").removeAttr("selected"); 
     } else { 
      alert("Doing nothing, venue: " + venueName); 
     } 
     event.preventDefault(); 
     return false; 
    }); 
});

来源

2012-03-07 12:17:29 pete

我绝对不希望有任何无线电默认选中的，但是这是一个有趣的观察。 – k3davis 2012-03-07 12:23:23

再看一下，因为你不想默认选中。更新了答案。 – pete 2012-03-07 12:36:02

您应该在函数的某处添加event.stopPropagation()以停止事件冒泡。像这样：

$('#venue').buttonset().unbind('click').bind('click', function(event, ui) { 
     // ... your code 
     event.stopPropagation(); 
    }

，或者就返回false：

$('#venue').buttonset().unbind('click').bind('click', function(event, ui) { 
     // ... your code 
     return false; 
    }

否则该事件被“穿过”父DIV，这也将引发同样的单击事件，并执行代码另一次

--- btw，'undefined'是你的单选按钮在没有被选中时的值（这是你现在的默认状态......）。你有没有理由首先解除“点击”事件？

来源

2012-03-07 12:18:15 giorgio

添加'event.stopPropagation（）;'似乎没有效果，并且在返回false时阻止了第二个循环，同时它也会中断它，因为它会在意外返回值“undefined”的第一个循环中停止。 – k3davis 2012-03-07 12:24:51

尝试使用类=“场地”，而不是名字，因为它是重复的可能调用处理器的2倍。
$('.venue').buttonset().unbind('click').bind('click', function(event, ui) {只被调用一次！

编辑：检查这一个：因为buttonset（）的http://jsfiddle.net/Qaxx3/33/

来源

2012-03-07 12:40:34 Vikko

这是一个很好的答案（感谢小提琴更新，因为我最初并不确定你的意思）。它删除了按钮组，但我没有在我的问题中具体说明这个愿望。 – k3davis 2012-03-07 13:57:23

jQuery函数必须重复才能工作

回答

相关问题