JQuery: Почему я получаю сообщение об ошибке?

Question

Моя скрипка здесь: http://jsfiddle.net/6yb7cv5c/

Посетите выше скрипку, и вы увидите в «результат» окна (внизу справа), что при нажатии на 3 точки она меняется в текстовое поле, щелкните, и она изменяет в текст еще раз, но нажав на него еще раз, чтобы изменить его в текстовое поле дает эту ошибку:

Uncaught TypeError: Cannot read property 'style' of undefined 

что эта линия:

$(this).find("span")[0].style.display="none"; 

Answer 1

проблема заключается в статической разметке (в начале) em элемент имеет span в качестве своего ребенка, внутри которого у вас есть содержание, но при редактировании его вы не положить его обратно

$(".editINPUT").blur(function() { 
    $(this)[0].style.display = "none"; 

    if ($(this)[0].value == "") { 
     $(this).prev()[0].innerHTML = "<span>...</span>"; 
    } else { 
     $(this).prev().html($('<span />',{text:this.value})) 
    } 
    $(this).prev().show(); 

    //var i = $(this)[0].attr("id"); 
    var i = $(this)[0].id; 

    var ii = $(this)[0].value; 
    console.log(i + " " + ii + " " + $("#tempData").data("data")); 
}); 

---

$(document).ready(function() { 
 
    $(".editDIV").dblclick(function() { 
 
    var $this = $(this), 
 
     text = $this.find('span').text(); 
 
    $("#tempData").data("data", text); 
 

 
    $this.find("span").hide(); 
 
    $this.find("input").val(text).show().focus(); 
 
    }); 
 
    $(".editINPUT").blur(function() { 
 
    var $this = $(this), 
 
     value = this.value; 
 
    $this.hide(); 
 

 
    var $span = $('<span />', { 
 
     text: value == "" ? '...' : this.value 
 
    }); 
 
    $this.prev().html($span).show(); 
 

 
    //var i = $(this)[0].attr("id"); 
 
    var i = this.id; 
 

 
    var ii = this.value; 
 
    console.log(i + " " + ii + " " + $("#tempData").data("data")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="picFilename editDIV"> 
 
    <em><span class="editESPAN" style="display:block;">...</span></em> 
 
    <input class="editINPUT" style="display:none;" type="text" id="2_1_c" /> 
 
</div> 
 
<div class="picFilename editDIV"> 
 
    <em><span class="editESPAN" style="display:block;">...</span></em> 
 
    <input class="editINPUT" style="display:none;" type="text" id="2_2_c" /> 
 
</div> 
 
<div class="editDIV"> 
 
    <span class="editESPAN" style="display:block;">asd</span> 
 
    <input class="editINPUT" style="display:none;" type="text" id="asdf1" /> 
 
</div> 
 
<div class="editDIV"> 
 
    <span class="editESPAN" style="display:block;">asd</span> 
 
    <input class="editINPUT" style="display:none;" type="text" id="asdf2" /> 
 
</div> 
 
<div id="tempData"></div>