Question

不幸的是，我最近遇到了一些JQuery问题。我正在开发一个项目，我需要在所有主流浏览器中使用AJAX应用程序，包括IE6和IE7。我为“update”和“delete”类创建了一个click事件，其中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()中的“课程”。

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... */ })将点击处理程序绑定到文本框，然后我附加了一个autosuggester。最初的autosuggest代码遗憾地没有尊重这样一个事实：可能有一些其他的点击处理程序在它像在中国商店的公牛踩踏之前被绑定并覆盖了点击事件：txtElem.click = function() { /* autoSuggest stuff... */ }。

因此，无论我绑定什么都被覆盖了。我尝试使用焦点，选择，没有任何工作，直到我废弃并重写autosuggester，以便更加敏感，因为它需要附加的事件可能已经附加了听众......

这可能不是您的问题的原因，因为您已经建议它只发生在IE6中，但是当这些症状开始发生时需要注意。

JQuery .class运算符在IE6中不起作用

2 个答案: