JQuery .class operator not working in IE6

Question

Hello everyone, I am unfortunately having some more problems with JQuery of late. I am working on a project in which I need to have an AJAX application working in all major browsers, including IE6 and IE7. I have created a click event for a button of the class "update" and "delete" in which an ajax request will be sent to the server. Unfortunately in IE6 (and only IE6) the event will not fire. After much experimentation I realized that it was the class selector. Here are some code tests I have been doing to get a click event to fire:

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

   });

Does anyone know why none of these work? Thank you very much for your help

Edit: here is the full code:

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

    });

sorry it's so long...

Answer 1

Try setting your instances of setAttribute('class',...) to use className instead.

If I recall, IE6 doesn't accept 'class' in setAttribute().

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

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

or perhaps both will be required:

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

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

Answer 2

In the past I've had some issues with this kind of thing where I've got incompatibilities between jQuery and another dependency, be it a non-jQuery function, different framework dependency etc.

For instance, I was using bind("click", function() { /* Stuff... */ }) to bind a click handler to a textbox which I then had an autosuggester attached. The original autosuggest code sadly didn't honour the fact that there may have been other click handlers bound before it came stomping in like a bull in a china shop and overwrote the click event: txtElem.click = function() { /* autoSuggest stuff... */ }.

Consequently whatever I was binding was overwritten. I tried using focus, select, nothing worked until I scrapped and rewrote the autosuggester to be more sensitive to the fact that events it needed to attach to might already have listeners attached...

This may not be the cause of your issue given that you've suggested it's only occurring in IE6, but it's something to look out for when these symptoms start occurring.