Question

I’m just getting into jQuery and notice strange behavior in the way some of my code is executed. When I execute a function based on a click action, the function runs twice, the first time with an “undefined” value for the click and the second with the expected value. The end result is the code “works” but I want to understand what I’m doing wrong that is causing this unexpected behavior.

Here’s my jQuery code:

$(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);
    }
  });
});

Note the three different ways of expressing the click action at the top, derived from jQuery docs and previous answers on this site. All have the same outcome. You can try it here:

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

Thanks for any insight. I’m hoping it’s a simple newbie mistake.

Answer 1

you set the click event on the element containing the inputs.
if you set it directly on the inputs it works as expected:

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