On - click函数不响应换行的span标记

Question

我正在尝试在输入字段和文本字段之间切换。如果我只在一个span标签上做，那就没问题了。但是，如果span标记包装为表数据，则它不会响应。

任何帮助将不胜感激。

UI

<div>
<table class="students">
      <thead>
          <tr>
              <th>Name</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                    <span id ="nameSpan">elvis</span>
                </td>                             
          </tr>
      </tbody>
  </table>  
</div>

JS

$(document).ready(function(){
    var focusInName = '';
    var focusOutName = '';
    $(function () {
        $(document).on("click", ".span", function () {
            focusInName = $(this).html();
            var input = $('<input />', {
                'type': 'text',
                    'name': 'aname',
                    'value': $(this).html(),
                    'class': 'input'
            });
            $(this).parent().append(input);
            $(this).remove();
            input.focus();
            alert(focusInName);
        });
        $(document).on('blur', ".input", function () {
            focusOutName = $(this).val();
            var span = $(
                '<span />', {
                'class': 'span',
                    'html': $(this).val()
            });
            $(this).parent().append(span);
            $(this).remove();        
            alert(focusOutName);
        });
    });
});

小提琴:

Answer 1

由于您正在使用类选择器(".class")，您需要添加类span与span元素

<span class='span' id ="nameSpan">elvis</span>

演示

Answer 2

把这个点从span中去掉

 $(document).on("click", ".span", function () {

 $(document).on("click", "span", function () {

Answer 3

直接删除。From first of span:

(document).on("click", "span", function () {