JQuery opérateur .class ne fonctionne pas dans IE6

Question

J'ai malheureusement plus de problèmes avec JQuery récemment. Je travaille sur un projet dans lequel j'ai besoin d'avoir une application AJAX fonctionnant dans tous les principaux navigateurs, y compris IE6 et IE7. J'ai créé un événement click pour un bouton de la classe "update" et "delete" dans lequel une requête ajax sera envoyée au serveur. Malheureusement dans IE6 (et seulement IE6) l'événement ne se déclenchera pas. Après beaucoup d'expérimentation, j'ai réalisé que c'était le sélecteur de classe. Voici quelques tests de code que j'ai fait pour déclencher un événement click:

$(".update").bind('click', function (event) { 

alert("update fired"); 

}); 

$('#BotTable').delegate('.update', 'click', function(event){ 

alert("update fired"); 
}); 

$('#BotTable').click(function (event) { 

if ($(event.target).is('.update')) { 

    alert("update fired"); 
     } 

    }); 

Est-ce que quelqu'un sait pourquoi cela ne fonctionne pas? Merci beaucoup pour votre aide

Edit: voici le code complet:

 $(document).ready(function() { 

    $.ajaxSetup({ cache: false }); 


    var items = "";       

    var information = $.ajax({ type: "GET", dataType: "html", url: "ShoppingCart2.aspx", data: "Total=t&Name=n&Price=p&Quantity=q&ProductCode=p", async: false }).responseText + " "; 

    items = information.substring(3, information.indexOf("#")); 

    information = information.substring(information.indexOf("#") + 1); 

    var id = 0; 
    while(information.indexOf("~") > 0 & id > - 1) 
     { 

     var subString = information.substring(0, information.indexOf("~")); 

     information = information.substring(information.indexOf("~") + 1); //~ is our delimiter. This allows me to get the appropriate item.   
     var ProductTotal = subString.substring(subString.indexOf("*") + 1); 
     var ProductName = subString.substring(subString.indexOf("|") + 1, subString.indexOf("@"));   
     var ProductPrice = subString.substring(subString.indexOf("@") + 1, subString.indexOf("^")); 
     var ProductQty = subString.substring(subString.indexOf("^") + 1, subString.indexOf("*")); 
     var ProductCode = subString.substring(0, subString.indexOf("|")); 


     //add a row to the table 


     var tblRow = document.getElementById('BotTable');//$('#BotTable'); 
     var lastRow = tblRow.rows.length; 
     var row = tblRow.insertRow(lastRow); 

     //now we add in cells 


     var cellOne = row.insertCell(0); 
     var textNode = document.createTextNode(ProductCode); 
     cellOne.id = 'prodCode' + id; 
     cellOne.appendChild(textNode); 
     // cellOne.id = 'prodCode' + id; 

     var cellTwo = row.insertCell(1); 
     var textNode2 = document.createTextNode(ProductName); 
     cellTwo.id = 'prodName' + id; 
     cellTwo.appendChild(textNode2); 


     var cellThree = row.insertCell(2); 
     var textNode3 = document.createElement("input"); 
     textNode3.value = ProductQty; 
     textNode3.id = 'quantity' + id; 
     cellThree.id = 'quantityCell' + id; 
     cellThree.appendChild(textNode3);  


     var cellFour = row.insertCell(3); 
     var textNode4 = document.createTextNode(ProductPrice); 
     cellFour.id = 'prodPrice' + id; 
     cellFour.appendChild(textNode4); 

     var cellFive = row.insertCell(4); 
     var textNode5 = document.createTextNode(ProductTotal); 
     cellFive.id = 'prodTotal' + id; 
     cellFive.appendChild(textNode5); 

     var update = "update" + id.toString(); 
     var cell6 = row.insertCell(5); 
     var textNode6 = document.createElement('input'); 
     textNode6.setAttribute('type', 'button'); 
     textNode6.id = update; 
     textNode6.setAttribute('class', 'update'); 
     cell6.id = 'updateCell' + id; 
     cell6.appendChild(textNode6); 

     var delete1 = "delete" + id.toString(); 
     var cellSeven = row.insertCell(6); 
     var textNode7 = document.createElement('input'); 
     textNode7.setAttribute('type', 'button'); 
     textNode7.id = delete1; 
     textNode7.setAttribute('class', 'delete'); 
     cellSeven.id = 'deleteCell' + id; 
     cellSeven.appendChild(textNode7); 

     id++; 
      } 

      $(".update").bind('click', function (event) { 

     alert("hello!"); 

      }); 


     $('#BotTable').delegate('.update', 'click', function(event){ 

     alert("the first part pinged"); 
     // step 1: get the # inside this button. Then find the textbox with that number 
     var idNum = event.target.id.substring(6); //this is the ID number. 

     //step 2: get data from textbox. qAmount = QueryAmount 
     var qAmount = $('#quantity' + idNum).val(); 


     var strCost = $.ajax({ type: "GET", dataType: "html", url: "ShoppingCart2.aspx", data: "Qty=" + qAmount + "&itemNumber=" + idNum, async: false }).responseText + " "; 
      txtTotal = $('#prodTotal' + idNum.toString()); 
      txtTotal.empty(); 

      txtTotal.append(strCost.substring(3, strCost.indexOf("|"))); 

      txtPrice = $('#prodPrice' + idNum.toString()); 
      txtPrice.empty(); 
      txtPrice.append(strCost.substring(strCost.indexOf("|") + 1), strCost.indexOf("<")); 

     }); 



    $('#BotTable').delegate('.delete', 'click', function(event){ 

    alert("Update hit"); //never happens in IE 
    // $("#BotTable").delegate('.delete', 'click', function (event) { 

     //find the current id via the button that was clicked on 
     var idNum = event.target.id.substring(6); 

     //set amount for the query string as 0 
     var qAmount = 0; 

     //find the product code for this row 
     var txtProdCode = $('#prodCode' + idNum.toString()); 
     //use a querystring to send 0 for selected productID thus removing it from the cart 
     $.get("ShoppingCart2.aspx", {"itemNumber" : idNum, "Qty": qAmount}); 

     //find all the cells of the row to be deleted 
     var prodName = $('#prodName' + idNum.toString()); 
     var quantity = $('#quantity' + idNum.toString()); 
     var prodPrice = $('#prodPrice' + idNum.toString()); 
     var prodTotal = $('#prodTotal' + idNum.toString()); 
     var update = $('#update' + idNum.toString()); 
     var delete1 = $('#delete' + idNum.toString()); 

     //remove the cells from the page 
     txtProdCode.empty(); 
     prodName.empty(); 
     prodPrice.empty(); 
     prodTotal.empty(); 
     update.remove(); 
     delete1.remove(); 
     quantity.remove(); 
     }); 

     $(".update").bind('click', function (event) { 
         alert("update hit"); 
         } 
        }); 

      $('#BotTable').click(function (event) { 
       if ($(event.target).is('.update')) { 
       alert("update fired"); 
       } 
      }); 

    }); 

désolé, il est si longtemps ...

Answer 1

Essayez la définition de vos instances de setAttribute('class',...) à utiliser className à la place.

Si je me souviens, IE6 n'accepte pas 'classe' dans setAttribute().

textNode6.setAttribute('className', 'update'); 

textNode7.setAttribute('className', 'delete'); 

ou peut-être les deux seront nécessaires:

textNode6.setAttribute('class', 'update'); 
textNode6.setAttribute('className', 'update'); 

textNode7.setAttribute('class', 'delete'); 
textNode7.setAttribute('className', 'delete'); 

Answer 2

Dans le passé, j'ai eu quelques problèmes avec ce genre de chose où j'ai des incompatibilités entre jQuery et une autre dépendance, que ce soit un Par exemple, j'utilisais bind("click", function() { /* Stuff... */ }) pour lier un gestionnaire de clic à une zone de texte à laquelle un autosuggester était attaché. Le code autosuggest d'origine n'a malheureusement pas honoré le fait qu'il y avait peut-être d'autres gestionnaires de clics liés avant qu'il ne soit entré comme un taureau dans un magasin de porcelaine et ait écrasé l'événement click: txtElem.click = function() { /* autoSuggest stuff... */ }.

Par conséquent tout ce que je liais a été écrasé. J'ai essayé d'utiliser la mise au point, sélectionnez, rien n'a fonctionné jusqu'à ce que j'ai supprimé et réécrit l'autosuggester pour être plus sensible au fait que les événements auxquels il devait s'attacher pouvaient déjà avoir des écouteurs attachés ...

Ceci peut ne pas être la cause de votre problème étant donné que vous avez suggéré que cela se produit uniquement dans IE6, mais c'est quelque chose à surveiller lorsque ces symptômes commencent à se produire.