ie7问题:jquery点击编辑不工作

IE 7 issue : jquery click to edit Not working

本文关键字：编辑 工作 问题 jquery ie7      更新时间：2023-09-26

我有一个上一篇文章的效果。它有一个按钮。当我点击它创建一个Div有能力点击和编辑和重命名字段。这个效果在所有浏览器中都很好，但在IE7中不行。我想知道为什么，如果有任何方法我可以让这个支持ie7。

这是js小提琴的现场演示

我的代码:

<button id="createDiv">Start</button>
<div id="results"></div>
CSS

    #createDiv, #results span { cursor: pointer; }
   #results div {
    background: #FFA;
    border: 1px solid;
   width:auto;
}
#results input[type=text] {
    border: none;
    display: none;
    outline: none;
}
.clickToCancleIcon{
float: right;
}
.new-folder{
height:30px; 
float:left;
 }

JS 

    //  Call for document .onload event
       $(function() {
       //  Normal Click event asignement, same as $("#createDiv").click(function
       $("#createDiv").on("click", function(e) {
         //  Simply creating the elements one by one to remove confusion
          var newDiv = $("<div />", { class: "new-folder" }),  //  Notice, each child variable is   appended to parent
            newInp = $("<input />", { name: "inpTitle[]",style:"display:block ;float:left; border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv),
            newSpan = $("<span />", { id: "myInstance2",style:"display:none; float:left;", text: "Unnamed Group", class: "title-span" }).appendTo(newDiv),

            clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv),
           clickToEdit = $("<span />", { text: "Edit" , style:"float:right; margin:0px 5px;" ,

             class: "clickToEdit" }).appendTo(newDiv);

        //  Everything created and seated, let's append this new div to it's parent
        $("#results").append(newDiv);
    });
    //  the following use the ".delegate" side of .on
    //  This means that ALL future created elements with the same classname, 
    //    inside the same parent will have this same event function added
    $("#results").on("click", ".new-folder .title-span", function(e) {
        //  This hides our span as it was clicked on and shows our trick input, 
        //    also places focus on input
        $(this).hide().prev().show().focus();
    });
    $("#results").on("blur", ".new-folder .title-inp", function(e) {
        //  tells the browser, when user clicks away from input, hide input and show span
        //    also replaces text in span with new text in input
        $(this).hide().next().text($(this).val()).show();
    });
    //  The following sures we get the same functionality from blur on Enter key being pressed
    $("#results").on("keyup", ".new-folder .title-inp", function(e) {
        //  Here we grab the key code for the "Enter" key
        var eKey = e.which || e.keyCode;
        if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
            $(this).hide().next().text($(this).val()).show();
        }
    });
})

看起来它指向这行代码

var newDiv = $("<div />", { class: "new-folder" }),

用引号将class改为"class"。

var newDiv = $("<div />", { "class": "new-folder" }),

，并对其他具有class的行执行相同的操作。

由于某些原因，IE7不喜欢使用没有字符串的属性名。看到:

http://jsfiddle.net/teynon/26fe9/7/

    //  Call for document .onload event
$(function() {
        //  Normal Click event asignement, same as $("#createDiv").click(function
        $("#createDiv").on("click", function(e) {
            //  Simply creating the elements one by one to remove confusion
            var newDiv = $("<div />", { "class": "new-folder" }),  //  Notice, each child variable is appended to parent
                newInp = $("<input />", { "name": "inpTitle[]","style":"display:block ;float:left; border:solid 1px #fa9a34", "type": "text", "value": "Unnamed Group", "class": "title-inp" }).appendTo(newDiv),
                newSpan = $("<span />", { id: "myInstance2",style:"display:none; float:left;", text: "Unnamed Group", "class": "title-span" }).appendTo(newDiv),

                clickToCancle = $("<a />", { "text": "X", "class": "clickToCancleIcon" }).appendTo(newDiv),
                clickToEdit = $("<span />", { "text": "Edit" , "style":"float:right; margin:0px 5px;" ,"class": "clickToEdit" }).appendTo(newDiv);

            //  Everything created and seated, let's append this new div to it's parent
            $("#results").append(newDiv);
        });
        //  the following use the ".delegate" side of .on
        //  This means that ALL future created elements with the same classname, 
        //    inside the same parent will have this same event function added
        $("#results").on("click", ".new-folder .title-span", function(e) {
            //  This hides our span as it was clicked on and shows our trick input, 
            //    also places focus on input
            $(this).hide().prev().show().focus();
        });
        $("#results").on("blur", ".new-folder .title-inp", function(e) {
            //  tells the browser, when user clicks away from input, hide input and show span
            //    also replaces text in span with new text in input
            $(this).hide().next().text($(this).val()).show();
        });
        //  The following sures we get the same functionality from blur on Enter key being pressed
        $("#results").on("keyup", ".new-folder .title-inp", function(e) {
            //  Here we grab the key code for the "Enter" key
            var eKey = e.which || e.keyCode;
            if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
                $(this).hide().next().text($(this).val()).show();
            }
        });
    })
相关文章：