Question

I have the following snippets of code. Basically what I’m trying to do is in the 1st click function I loop through my cached JSON data and display any values that exist for that id. In the 2nd change function I capturing whenever one of the elements changes values (i.e. yes to no and vice versa).

These elements are all generated dynamically though the JSON data I’m receiving from a webservice. From my understanding that is why I have to use the .live functionality.

In Firefox everything works as expected (of course). However, in IE7 it does not. In IE7, if I select a radio button that displays an alert from the click function then it also adds to the array for the changed function. However, if the radio button does not do anything from the click function then the array is not added to for the change.

As I look at this code I’m thinking that I might be able to combine these 2 functions together however, right now I just want it to work in IE7.

$(document).ready(function () {
    //This function is run whenever a 'radio button' is selected.
    //It then goes into the CPItemMetaInfoList in the cached JSON data
    //($.myglobals) and checks to see if there are currently any 
    //scripts to display.

$("input:radio").live("click", function () {
    var index = parseInt(this.name.split(':')[0]);
    for (i = 0; i <= $.myglobals.result.length - 1; i++) {
        if ($.myglobals.result[i].CPItemMetaInfoList.length > 0) {
           for (j = 0; j <= $.myglobals.result[i].CPItemMetaInfoList.length - 1; j++) {
                if (index == $.myglobals.result[i].QuestionId) {
                    alert($.myglobals.result[i].CPItemMetaInfoList[j].KeyStringValue);
                    return;
                }
            }
        }
    }
});
});

$(document).ready(function () {
    var blnCheck = false;
    //Checks to see if values have changed.
    //If a value has been changed then the isDirty array gets populated.
    //This array is used when the questionSubmit button is clickeds
    $('input').live('change', function () {
        blnCheck = false;

        for (i = 0; i <= isDirty.length - 1; i++) {
            if (isDirty[i] == $(this).attr("name")) {
                blnCheck = true;
                break
            }
        }


    if (blnCheck == false) {
        isDirty[arrayCount] = $(this).attr("name");
        arrayCount += 1;
        alert($(this).attr("name"));
    }
});

$('textarea').live('change', function () {
    blnCheck = false;
    for (i = 0; i <= isDirty.length - 1; i++) {
        if (isDirty[i] == $(this).attr("id")) {
            blnCheck = true;
            break
        }
    }

    if (blnCheck == false) {
        isDirty[arrayCount] = $(this).attr("id");
        arrayCount += 1;
        //alert($(this).attr("name"));
    }
});
});

UPDATE:

I had to move this chunk of code into the click function:

   blnCheck = false;
   for (i = 0; i <= isDirty.length - 1; i++) {
        if (isDirty[i] == $(this).attr("name")) {
            blnCheck = true;
            break
        }
    }


    if (blnCheck == false) {
        isDirty[arrayCount] = $(this).attr("name");
        arrayCount += 1;
        alert($(this).attr("name"));
    }

Like this:

     $(document).ready(function () {
     //This function is run whenever a 'radio button' is selected.
     //It then goes into the CPItemMetaInfoList in the cached JSON data
     //($.myglobals) and checks to see if there are currently any 
     //scripts to display.

     $("input:radio").live("click", function () {
         var index = parseInt(this.name.split(':')[0]);
         for (i = 0; i <= $.myglobals.result.length - 1; i++) {
             if ($.myglobals.result[i].CPItemMetaInfoList.length > 0) {
                for (j = 0; j <= $.myglobals.result[i].CPItemMetaInfoList.length - 1; j++) {
                     if (index == $.myglobals.result[i].QuestionId) {
                         alert($.myglobals.result[i].CPItemMetaInfoList[j].KeyStringValue);
                         return;
                     }
                 }
             }
         }
         blnCheck = false;

         for (i = 0; i <= isDirty.length - 1; i++) {
             if (isDirty[i] == $(this).attr("name")) {
                 blnCheck = true;
                 break
             }
         }

      if (blnCheck == false) {
          isDirty[arrayCount] = $(this).attr("name");
          arrayCount += 1;
      }

     });
});

But…

I had to leave the change function the same. From my testing I found that the .click function worked for IE7 for the radio buttons and checkbox elements, but the .change functionality worked for the textboxes and textareas in IE7 and FF as well as the original functionality of the radio buttons and checkbox elements.

This one got real messy. Thanks to @Patricia for looking at it. Here suggestions did lead me to this solution. I’m going to leave the question unanswered as I wonder if there isn’t a cleaner solution to this.

Answer 1

Fact: change event on radio buttons and checkboxes only get fired when the focus is lost (i.e. when the blur event is about to occur). To achieve the “expected” behaviour, you really want to hook on the click event instead.

You basically want to change

$('input').live('change', function() {
    // Code.
});

to

$('input:radio').live('click', functionName);
$('input:not(:radio)').live('change', functionName);

function functionName() {
    // Code.
}

(I’d however also take checkboxes into account using :checkbox selector for the case that you have any in your form, you’d like to treat them equally as radiobuttons)