單擊功能不響應包裹的跨度標簽

Question

我試圖在輸入字段和文本字段之間切換。 如果我只是在一個span標記上執行此操作，那么它將正常工作。 但是，如果將span標記包裝為表數據，則它不會響應。

任何幫助將不勝感激。

用戶界面

<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

只需從跨度中刪除點

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

至

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

Answer 2

由於您使用的是Class Selector（“ .class”） ，因此需要使用span元素添加class span

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

演示

Answer 3

只需刪除。 從第一個跨度開始：

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