JQuery .class運算符不能在IE6中工作

Question

我很遺憾還有一些與JQuery有關的問題。我正在開發一個項目，在該項目中，我需要在所有主流瀏覽器（包括IE6和IE7）上運行AJAX應用程序。我爲「update」和「delete」類的按鈕創建了一個單擊事件，其中ajax請求將發送到服務器。不幸的是，在IE6（只有IE6）中，事件不會觸發。經過多次實驗後，我意識到它是類選擇器。這裏有一些代碼測試，我一直在做點擊事件發生：

$(".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"); 
     } 

    }); 

有沒有人知道爲什麼這些工作都沒有？非常感謝您的幫助

編輯：這裏是全碼：

 $(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"); 
       } 
      }); 

    }); 

抱歉它是如此漫長......

Answer 1

嘗試設置的setAttribute('class',...)的情況下使用，而不是className。

如果我記得，IE6不接受setAttribute()中的'class'。

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

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

或許都將被要求：

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

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

Answer 2

在過去，我已經受夠了這種事情，我已經得到了jQuery和其他依賴之間的不兼容一些問題，無論是非jQuery函數，不同的框架依賴等。

例如，我使用bind("click", function() { /* Stuff... */ })將點擊處理程序綁定到一個文本框，然後我附加了一個自動監視器。最初的自動推薦代碼可悲地沒有兌現這樣一個事實，即在它像瓷磚商店中的公牛一樣跺腳之前，可能還有其他點擊處理程序被綁定，並且覆蓋了點擊事件：txtElem.click = function() { /* autoSuggest stuff... */ }。

因此，無論我綁定的是被覆蓋。我嘗試使用焦點，選擇，沒有任何工作，直到我報廢和重寫自動監視器更加敏感的事實，它需要附加到事件可能已經有聽衆附加...

這可能不是你的原因因爲你已經建議它只發生在IE6中，但是當這些症狀開始發生時需要注意。