Jquery attr onClick does'nt seeem to work in IE 8

Question

I am binding onclick to multiple elements in a loop, and the arguments passed to that onclick function are dynamic. It works fine in Chrome and FF but in IE8, it doesn't work at all.

$('span.'+audt[j].name).attr("onClick","deleteAuditor("+r+","+3+")"); 

note that I cannot use

$('span.'+audt[j].name).click(function(){
   deleteAuditor(r,3);
}); 

because "r" here is unknown when it's clicked as i am binding click event on load of the form.

complete function

function fnMultiRowValidation(){
  try{
    var JSONOBJ = null;
    var jsonNode = decodeHtmlContent(F.READONLY_LIST_OF_VALUES.readValue());//jsonNode.replace(/blue/g,"red");

    try{vObj = JSON.parse(jsonNode.replace(/:null/g,':""'))}catch(e){  };

    var tpaName = vObj.tpaCo;
    var audt; 
    var l_lead_name = '';
    var fp_sub = 0;
    var disableRadio_d = 0;

    for (k in tpaName){
        audt = tpaName[k].aud;
        var tpName = tpaName[k].name;
        disableRadio_d = 0;
        l_syn_sub = 0;  
        l_lead_submitted = 0;
        l_lead_name = '';

        tpaArrayTrack['"'+tpName+'"'] = l_lead_submitted;

        for (j in audt){  
            /*
              'SYNC' - 1
              'SUBMIT' - 2 
              'UPLOAD' - 3 -- UPLOADED FROM BRIEFCASE/IPAD
              'X' - 4 DISCARDED ASSIGNMENT
              'Z' - 5  NO ACTION
              NO ASSIGNMENT - 0

              "name":100369,
              "asgn":5,
              "lead":1,
              "offline":0
            */

            if (audt[j].name != ''){

              var disableDelete = 0;
              var disableAssignment = 0;
              var reAssignMandatory = 0;
              var reAssignOptional = 0;
              var hasAssignment = 0;

              var r = $('span.'+audt[j].name).attr('id');



              if(audt[j].asgn == 1 || audt[j].asgn == 3){
                l_syn_sub = 1;
              }
              if(audt[j].asgn == 2){
                l_syn_sub = 2;
              }

              if (audt[j].lead == 1){
                l_lead_name = audt[j].name;
                if (audt[j].asgn == 2){
                  l_lead_submitted = 1; 
                  tpaArrayTrack['"'+tpName+'"'] = l_lead_submitted;
                  $('span.'+audt[j].name).parents('.audit-company_d').find('.add_auditor').remove();
                }
              }


              if (l_lead_submitted != 1 && audt[j].offline == 1){
                disableDelete = 1;
              }

              if (audt[j].asgn == 2){
                disableAssignment = 1;
                disableDelete = 1;
              }

              if (audt[j].asgn == 1 || audt[j].asgn == 3 || vStatus == 5){
                reAssignMandatory = 1;
              }

              if (audt[j].asgn == 5){
                reAssignOptional = 1;
              }

              if (audt[j].offline == 1){
                $('span.'+audt[j].name).parents('.audit-company_d').find('[id^="DELETETPA"]').remove();
                disableRadio_d = 1;
              }

              if (audt[j].asgn != 4){
                if (disableDelete == 1){
                  $('span.'+audt[j].name).hide();
                }
                if (hasAssignment == 1){
                    //$('span.'+audt[j].name).attr("onClick","deleteAuditor("+r+","+3+")");
                    $('span.'+audt[j].name)[0].onclick = "deleteAuditor("+r+","+3+"));"; 
                    /*$('span.'+audt[j].name).click(function(){
                        deleteAuditor(r,3);
                    });*/
                }
                if (reAssignOptional == 1){
                  //$('span.'+audt[j].name).attr("onClick","deleteAuditor("+r+","+1+")");
                  $('span.'+audt[j].name)[0].onclick = "deleteAuditor("+r+","+1+"));";
                  /*$('span.'+audt[j].name).click(function(){
                        deleteAuditor(r,1);
                  });*/ 
                }
                if (reAssignMandatory == 1){
                  $('span.'+audt[j].name).attr("onClick","deleteAuditor("+r+","+0+")");
                  /*$('span.'+audt[j].name).click(function(){
                        deleteAuditor(r,0);
                  });*/
                }
                if (disableAssignment == 1){
                  F.AUDITOR_ASSIGNMENTS.disable(r);
                  $('#image'+getSeq(F.AUDITOR_ASSIGNMENTS.getSequence(),r)).remove();
                  $('#idlov'+getSeq(F.AUDITOR_ASSIGNMENTS.getSequence(),r)).attr('disabled', 'disabled');
                }
              }
            }
        }

        if (tpaName[k].name != ''){
          disable_radio['"'+tpaName[k].name+'"'] = 0;
        }

        if (disableRadio_d == 1){
          $("input[name='leadrg"+tpaName[k].name+"']").attr("disabled", true);
          disable_radio['"'+tpaName[k].name+'"'] = 1; 
        }

        if (l_syn_sub == 1 || l_syn_sub == 2 || vStatus==5 || vStatus==6){
          $("input[name='leadrg"+tpaName[k].name+"']").attr("disabled", true);
          disable_radio['"'+tpaName[k].name+'"'] = 1; 
          if (l_syn_sub == 1 || l_syn_sub == 2){
            var lr = $('span.'+l_lead_name).attr('id');
            //$('span.'+l_lead_name).attr("onClick","deleteAuditor("+lr+","+0+")"); 
            $('span.'+l_lead_name).click(function(){
                deleteAuditor(lr,0);
            });
          }
        }
    }


    if (vStatus=='5'||vStatus=='6'||vStatus=='8'||vStatus=='9'||vStatus=='10'||vStatus=='11'||vStatus=='12'||vStatus=='13'||vStatus=='14'){
      var audcnt = F.AUD.getRowCount();
      if(audcnt > 0){
        for(var i=1;i<=audcnt;i++){
          if(!F.AUD.isMarkedForDeletion(i)){ 
            if (vStatus=='8'||vStatus=='9'||vStatus=='10'||vStatus=='11'||vStatus=='12'||vStatus=='13'||vStatus=='14'){
              $('span.'+audt[j].name).hide();
            }
            var r = $('span.'+F.AUDITOR.read(i)).attr('id');
            $('#image'+getSeq(F.AUDITOR_ASSIGNMENTS.getSequence(),i)).remove();
            $('#idlov'+getSeq(F.AUDITOR_ASSIGNMENTS.getSequence(),i)).attr('disabled', 'disabled');  
          }
        }
      }
    }

    if(vStatus=='4' && vObj.Apple == 1){
      $("#idlov"+F.ONSITE_LEAD.getSequence()).attr("disabled","disabled");
      setTimeout(function(){$('#ONSITE_LEAD_field__div').find('img.x-form-trigger').remove()},2000);
    }else if((vStatus=='5'||vStatus=='6') && vObj.Apple == 1){
      $("#idlov"+F.APPLE_LEAD.getSequence()).attr("disabled","disabled");
      setTimeout(function(){$('#APPLE_LEAD_field__div').find('img.x-form-trigger').remove()},2000);
    }


  }catch(e){  }
}

i have pasted the complete function. please check it and let me know if you have any solution.

Answer 1

You just need a closure (created via an immediately invoked function expression) to preserve the value of r when the click event handler executes:

if (reAssignMandatory == 1){
    (function(r) {
        // the value of r is locked to what was passed in to this
        // it won't change even if the value of r changes outside of this scope
        $('span.' + audt[j].name).click(function(e) {
            deleteAuditor(r,0);
        }
    })(r);
}

and the same for the other if statements above that.