Simple bind not working in IE for Radiobutton in jQuery

Question

Hi this works fine in Firefox, but not IE. What am I doing wrong? Thanks for the help in advance!

$(document).ready(function(){
  $("#radiodiv").buttonset();
  $('#radio1').bind("click", function() {
     alert('Hello');
   });
}

<form>
 <div id="radiodiv">
  <input type="radio" id="radio1" name="radio" checked="checked"  /><label for="radio1">WaveHeight</label>
  <input type="radio" id="radio2" name="radio" /><label for="radio2">Current</label>
  <input type="radio" id="radio3" name="radio" /><label for="radio3">WaveHeightDir</label>
 </div>
</form>

Answer 1

You have a syntax error in your JavaScript code:

$(document).ready(function(){
  $("#radiodiv").buttonset();
  $('#radio1').bind("click", function() {
     alert('Hello');
   });
}

Should be closed with a closestache (}) then close-parenthesis ()) and then a semi-colon (;), as follows:

$(document).ready(function(){
  $("#radiodiv").buttonset();
  $('#radio1').bind("click", function() {
     alert('Hello');
   });
});

Using a web debugging tool like FireBug and an editor with a decent syntax-highlighter can help you easily catch these kinds of syntax errors.

Answer 2

I've been having the same issue.It seems like when you use buttonset on a radiobutton group,click and change events don't fire.I've noticed that catching the events on the label works fine.

<div id="buttonGroup1" class='demo'>
                        <input  type="radio" id="radio1" name="radio" /><label for="radio1" class='tabButton'>Top 10 FAQ's</label>
                        <input  type="radio" id="radio2" name="radio" /><label for="radio2" class='tabButton'>Last 30 Days</label>
    </div>

and

$('.tabButton').click(function() { alert('Hi'); });