jQuery関数が動作するために反復する必要があります

Question

私はちょうどjQueryに入り、私のコードの一部が実行される方法で奇妙な動作に気付きました。クリックアクションに基づいて関数を実行すると、その関数は2回実行されます。最初は「未定義」の値、2回目は期待値です。最終的な結果はコード "作品"ですが、私はこの予期しない動作の原因となっている間違っていることを理解したいと思います。

$(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のドキュメントとこのサイトに以前の回答由来上部のクリックアクションを表現する3つの異なる方法、：

は、ここに私のjQueryのコードです。すべては同じ結果を持っています。あなたはここでそれを試すことができます任意の洞察力のための

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

感謝を。私はそれが単純な初心者の間違いだと思っています。

Answer 1

入力を含む要素に対してclickイベントを設定します。 あなたが入力に直接それを設定した場合、期待どおりに動作します。それは、ハンドラを2回呼ぶかもしれない重複しているので、

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

Answer 2

デフォルトではいずれの無線機もチェックされていません。

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

Answer 3

：あなたのフィドルで作品を以下のコード：

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

したくない場合はどちらかデフォルトで選択、changeイベントとpreventDefaultを使用します。私はとフィドルにソースを変更した場合ワークス関数のどこかに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に「を通過」されるので、同様別の時刻

---「未定義」は、ラジオボタンが選択されていないときのラジオボタンの値です（現在のデフォルト状態です）。最初に「クリック」イベントをバインド解除する理由はありますか？

Answer 4

は、クラス=「会場」の代わりに名前を使用してみてください。
$('.venue').buttonset().unbind('click').bind('click', function(event, ui) {は1回だけ呼び出されます。

編集：この1つのチェック：あなたはそれが正常に動作することを削除した場合、理由buttonset（）のhttp://jsfiddle.net/Qaxx3/33/