Question

访问上面的小提琴，您将在“结果”窗口（右下角）中看到，当您单击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>

JQuery：为什么我收到错误？

1 个答案: