IE 7問題：jquery點擊編輯不起作用

Question

我從我以前的帖子中產生效果。它有一個按鈕。當我點擊它創建一個有能力點擊和編輯和重命名字段。這個效果在IE7的所有瀏覽器中都很好。我想知道爲什麼以及如果有什麼方法我可以通過IE 7提供這種支持。

Here is Live demo in js fiddle

我的代碼：

HTML

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

Answer 1

看起來它指向這行代碼

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

變化class到"class"用引號。

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

並且對其他具有類的行也做同樣的事情。

Answer 2

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