Question

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');