setting functionality click for radio button doesn't work in IE

Question

My problem is quite annoying, probably something really stupid but I've been going around it and didn't find a solution.I call in 2 different pages to this partial view:

<div id="NotificationStatusSuspensionDiv">     
     <p>
        <strong><%= Html.Label("Status :") %> </strong><br />

        <input type="radio" name="NotificationStatusSuspension" id="statusA" value="A" checked="checked" />
        <label for="statusA">Active</label>
        <input type="radio" name="NotificationStatusSuspension" id="statusN" value="N" />
        <label for="statusN">Not Active</label>
     </p>
 </div>    

The thing is that in the document.ready method in an external javascript file I do this:

  $('input:radio[name="NotificationStatusSuspension"]').each(function() {
    $(this).click(function() {
           setNotificationStatus($(this));
    });
});

I've seen that this works fine, when I click the radiobutton it loads the notifications which correspond to the status selected (that is what setNotificationStatus does). The problem is when I add the UI to the radiobutton like this:

$('#NotificationStatusSuspensionDiv').buttonset();

With all this code, it works perfectly fine in firefox and Chrome, but in IE it doesn't do anything. It is as if it didn't recognize the mouse click. The funny thing about this is that I have more or less the same code in another part of the site and it works just fine with IE....Do you have any clue ?

Answer 1

I'd try a few things:

In your jQuery selector, try putting quotes around the attribute to match:

$('input:radio[name="NotificationStatus"]')

Try using jQuery's each() method, so your events are bound like this:

$('input:radio[name="NotificationStatus"]').each(function(){
  $(this).click(function(){
    alert($(this).val());
  });
});

And finally, try ID'ing things with alphanumerics and underscores only. The third radio button has a % sign in the ID name, and I'm not sure if that's good practice. IE might throw fits when it sees that.

PS: for clarity (and standards), you might want to remove the spaces around the equals sign in your attributes as well as adding a space before the self-closing slash. For example, change:

<input type="radio" name="NotificationStatus" id="statusA" value = "A" checked = "checked"/>

to

<input type="radio" name="NotificationStatus" id="statusA" value="A" checked="checked" />