jQuery .attr not working in IE6 & IE7

Question

Hello

The javascript code below is about half way on my php page, I can't directly modify the radio buttons with IDs q_251_789 and q_251_790 on my page unfortunately, hence why I'm using JS to add attributes to those two radio buttons:

<script><!--
$("#q_249_249").hide();
$("#q249").hide();
$("#q_251_789").attr("onClick","yesClicked();");
$("#q_251_790").attr("onClick","noClicked();");

function yesClicked()
{
    $("#q_249_249").show();
    $("#q249").show();
    $("#addressTable").show();
};

function noClicked()
{
    $("#q_249_249").hide();
    $("#q249").hide();
    $("#addressTable").hide();
 };
//--></script>

In Chrome (dev), FF (3.6), and IE8 this all works fine.

In IE6 and IE7 the following two lines of the script do not work but are not producing any errors (According to IE dev tools -> JS debugger):

$("#q_251_789").attr("onClick","yesClicked();");
$("#q_251_790").attr("onClick","noClicked();");

Any ideas what I'm doing wrong? Or a workaround to achieve the same goal?

Answer 1

Instead of setting an event handler .attr() attach the .click() handlers the unobtrusive way, like this:

$("#q_251_789").click(yesClicked);
$("#q_251_790").click(noClicked);

Or, use anonymous functions like this (the combined selectors is just a shortcut, but unrelated):

$("#q_251_789").click(function () {
    $("#q_249_249, #q249, #addressTable").show();
});
$("#q_251_790").click(function () {
    $("#q_249_249, #q249, #addressTable").hide();
});