Issues with IE7 using jQuery [click and change functions]

Question

I have the following code snippets. Basically what I'm trying to do is a 1st click function through which I look at the JSON cache data and display any values ​​that exist for this identifier. In the second function of the change, I write down when one of the elements changes the values ​​(i.e., Yes to no, and vice versa).

All of these elements are generated dynamically, although the JSON data that I get from the web service. In my opinion, therefore I should use .live functionality.

In Firefox, everything works as expected (of course). However, in IE7 this is not the case. In IE7, if I select a switch that displays a warning from a click function, it also adds the changed function to the array. However, if the switch does nothing of the click function, then an array is not added for the change.

Since I look at this code, I think I could combine these 2 functions together, but for 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 piece of code into a 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 radio buttons and checkbox elements, but the .change functionality worked for text fields and text fields in IE7 and FF, as well as the original radio button and checkbox functions.

It became a real mess. Thanks @Patricia for this. Here the suggestions led me to this decision. I am going to leave the question unanswered, as I am wondering if there is a cleaner solution in it.

Answer 1

Fact: the change event on switches and checkboxes is fired only when focus lost (i.e. when the blur event occurs). To achieve the “expected” behavior, you really want to hook into the click event.

Basically you want to change

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

to

 $('input:radio').live('click', functionName); $('input:not(:radio)').live('change', functionName); function functionName() { // Code. } 

(However, I also allow for checkboxes with :checkbox selector for the case when you have any forms, you'd like to treat them equally as radio objects)

Answer 2

I think this is due to the fact that IE is triggered when focus is lost during checks and radio. therefore, if a warning appears, the focus is lost, and therefore the change event is triggered.

EDIT:

try changing the $('input') selector to $('input:not(:radio)')

so that the click fires for your radio stations and changes for everyone else.

Edit # 2:

How to put things that happen when switching to a separate function. with an index as a parameter. then you can call this function from change () and click (). place a call to this function after you finish working with a click.

Answer 3

You declare your blnCheck variable inside one of your document.ready () functions (you also don't need two of them, they can all be in one.

This means that the variable you declare there will not be the one used when your change function is actually called, instead you will get some kind of implicit global character. I don't know if this is part of it, but maybe worth a look. You should declare this at the top of your JS file.