第一

Question

我正在处理网站中的一种情况，即我希望用户能够单击某些文本（由<span>包围）并将其变成输入框，然后编辑或失去焦点后返回纯文本。

我到处都发现了很多东西，但没有一个真的有用！

在我的实际网页中，同样起作用的jsfiddle无法正常工作。所以这是我页面的代码，我希望有人向我解释为什么它不起作用并帮助我修复它。

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {
    $('span').live('click', function() {
      var input = $('<input />', {
        'type': 'text',
        'name': 'aname',
        'value': $(this).html()
      });
      $(this).parent().append(input);
      $(this).remove();
      input.focus();
    });

    $('input').live('blur', function() {
      $(this).parent().append($('<span />').html($(this).val()));
      $(this).remove();
    });
  });
</script>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .box {
    border: 1px;
    border-style: solid;
    padding: 1px;
  }
  
  .rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  table {
    empty-cells: show;
    padding: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .padd {
    padding: 0px;
  }
  
  .padding {
    padding: 0px;
  }
</style>



<body>
  <div style="margin: 0 auto; width: 40%;">

    Currently Viewing.
    <div style=" width: 100%; display: flex;
         border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
      <div style="width: 25%;">Date:</div>
      <div style="width: 25%;">asdasdasd</div>
      <div style="width: 25%;">Client: </div>
      <div style="width: 25%;">asdsd</div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
             border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Style #:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Season / Year: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Size Range:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;"> Preparation/Thread: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Sample Size:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Description: </div>
        <div style="width: 25%;"> asdsd</div>
      </div>
    </div>


    <br> Before....

    <span>
                  test
               </span>


    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

    <br> After...
    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>

        </td>
        <td class="box padding">

        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

  </div>



  </div>
</body>

</html>

我正试图把这部分变成一个文本框

  <br>
    Before....

        <span>
              test
           </span>


    <br>

Answer 1

将.live()弃用，将.on()更改为.live()。

下面是工作代码：

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(function() {
    $('span').on('click', function() {
      var input = $('<input />', {
        'type': 'text',
        'name': 'aname',
        'value': $(this).html()
      });
      $("#container").append(input);
      $("#testSpan").remove();
      input.focus();
    });

    $('input').on('blur', function() {
      $(this).parent().append($('<span />').html($(this).val()));
      $(this).remove();
    });
  });
</script>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .box {
    border: 1px;
    border-style: solid;
    padding: 1px;
  }
  
  .rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  table {
    empty-cells: show;
    padding: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .padd {
    padding: 0px;
  }
  
  .padding {
    padding: 0px;
  }
</style>



<body>
  <div style="margin: 0 auto; width: 40%;">

    Currently Viewing.
    <div style=" width: 100%; display: flex;
         border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
      <div style="width: 25%;">Date:</div>
      <div style="width: 25%;">asdasdasd</div>
      <div style="width: 25%;">Client: </div>
      <div style="width: 25%;">asdsd</div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
             border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Style #:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Season / Year: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Size Range:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;"> Preparation/Thread: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Sample Size:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Description: </div>
        <div style="width: 25%;"> asdsd</div>
      </div>
    </div>


    <br> Before....
<div id="container">
    <span id="testSpan">test</span>
    </div>


    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

    <br> After...
    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>

        </td>
        <td class="box padding">

        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

  </div>



  </div>
</body>

</html>

Answer 2

.live()在jQuery 1.7中已弃用，在1.9中已完全删除。您正在使用3.3.1，因此应改用.on()。

Answer 3

第一

html甚至不是有效的。 BR标签不能在TABLE内。您到处都有多余的结束标签，而应该放在HEAD中的内容只是放置在html中（样式和脚本标签）

第二个和更重要的

您正在尝试将事件添加到不存在的元素中。当您将脚本标签放在主体顶部时，将在主体完成之前运行JS。

这变得尤为重要，因为与其正确地委派事件，不如将新的事件侦听器附加到每个单个span标记上

https://learn.jquery.com/events/event-delegation/

第三

MVCE在StackOverflow上非常重要。当您的问题仅涉及单个span标记时，请勿包括整个html页面。我为您清理了html，以便您可以使用“复制和粘贴”的解决方案。但是您的问题应该只包含与您的问题相关的html

https://stackoverflow.com/help/mcve

修复

运行时：

a。将JS放在应该放置的主体底部

b。将您的JS包装在$(function(){})
事件委托

这里的所有事件都应委托给一个公共父对象： $(document).on('click', 'span', function(){})
live已过时，您不应使用它。

在开始使用它之前，您应该始终阅读所用任何库的文档

$(function () {
  $(document).on('click', 'span', function () {
  console.log(this)
    var input = $('<input />', {'type': 'text', 'value': $(this).text().trim()});
    $(this).replaceWith(input);
    input.focus();
  });
  
  $(document).on('blur', 'input', function () {
    var val = $(this).val(),
       span = $('<span />');
    span.html(val)
    $(this).replaceWith(span);
  });
});

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 10px;
  
}
.cell {
  width: 100%; display: flex; border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;
 }
.box {
  border: 1px;
  border-style: solid;
  padding: 1px;
}
.rotated {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
table { 
  empty-cells: show;
  padding: 0px;
  border-spacing: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}
.padd {
  padding: 0px;
}
.padding {
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="margin: 0 auto; width: 40%;">
  
  Currently Viewing.
  <div class="cell">
    <div style="width: 25%;">Date:</div>
    <div style="width: 25%;" >asdasdasd</div>
    <div style="width: 25%;">Client: </div>
    <div style="width: 25%;">asdsd</div>
  </div>
  <div class="cell">
    <div style="width: 25%;">Style #:</div>
    <div style="width: 25%;">asdasdasd</div>
    <div style="width: 25%;">Season / Year: </div>
    <div style="width: 25%;">asdsd</div>
  </div>
  <div class="cell">
    <div  style="width: 25%;">Size Range:</div>
    <div style="width: 25%;">asdasdasd</div>
    <div style="width: 25%;"> Preparation/Thread: </div>
    <div style="width: 25%;">asdsd</div>
  </div>
  <div class="cell">
    <div style="width: 25%;">Sample Size:</div>
    <div style="width: 25%;" >asdasdasd</div>
    <div style="width: 25%;">Description: </div>
    <div style="width: 25%;"> asdsd</div>
  </div>
  
  
  <br>
  Before....
  
  <span>
    test
  </span>
  
  
  <br>
  <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
    <thead>
      <tr>
        <td colspan="3">
          
        </td>
        <td class="box" >
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td  class="box">
          S
        </td>
        <td class="box" >
          M
        </td>
        <td class="box" >
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
    </thead>
    <tbody>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2" >BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>
        
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>
      </tr>
      <tr style="height: 10px;" class="padding box">
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>
        
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>
      </tr>
    </tbody>
  </table>
  
  <br>
  After...
  <br>
  <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
    <thead>
      <tr >
        <td colspan="3">
          
        </td>
        <td class="box" >
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td  class="box">
          S
        </td>
        <td class="box" >
          M
        </td>
        <td class="box" >
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
    </thead>
    <tbody>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2" >BODY</td>
        <td>
          
        </td>
        <td class="box padding">
          
        </td>
        
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>
      </tr>
      <tr style="height: 10px;" class="padding box">
        
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>
        
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>
      </tr>
    </tbody>
  </table>
  
</div>

Answer 4

如果您运行堆栈代码段，则会看到错误消息$(...).live is not a function。在v1.9中已将其删除。

您必须使用on()

创建自己的事件委托

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {
    $(document).on('click', 'span', function() {
      var input = $('<input />', {
        'type': 'text',
        'name': 'aname',
        'value': $(this).html()
      });
      $(this).after(input);
      $(this).remove();
      input.focus();
    });

    $(document).on('blur', 'input', function() {
      $(this).after($('<span />').html($(this).val()));
      $(this).remove();
    });
  });
</script>

<style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .box {
    border: 1px;
    border-style: solid;
    padding: 1px;
  }
  
  .rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  table {
    empty-cells: show;
    padding: 0px;
    border-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
  
  .padd {
    padding: 0px;
  }
  
  .padding {
    padding: 0px;
  }
</style>



<body>
  <div style="margin: 0 auto; width: 40%;">

    Currently Viewing.
    <div style=" width: 100%; display: flex;
         border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
      <div style="width: 25%;">Date:</div>
      <div style="width: 25%;">asdasdasd</div>
      <div style="width: 25%;">Client: </div>
      <div style="width: 25%;">asdsd</div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
             border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Style #:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Season / Year: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Size Range:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;"> Preparation/Thread: </div>
        <div style="width: 25%;">asdsd</div>
      </div>
    </div>
    <div>
      <div style=" width: 100%; display: flex;
                border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
        <div style="width: 25%;">Sample Size:</div>
        <div style="width: 25%;">asdasdasd</div>
        <div style="width: 25%;">Description: </div>
        <div style="width: 25%;"> asdsd</div>
      </div>
    </div>


    <br> Before....

    <span>
                  test
               </span>


    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

    <br> After...
    <br>
    <table class="padding box" style=" width: 100%;border: 1px; border-style: solid; padding: 0px;  table-layout: fixed; border-collapse: collapse;">
      <tr>
        <td colspan="3">

        </td>
        <td class="box">
          Tol
        </td>
        <td class="box">
          XS
        </td>
        <td class="box">
          S
        </td>
        <td class="box">
          M
        </td>
        <td class="box">
          L
        </td>
        <td class="box">
          XL
        </td>
      </tr>
      <br>
      <tr style="height: 10px;" class="padding box">
        <td class="box padding rotated" style="width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan="2">BODY</td>
        <td>

        </td>
        <td class="box padding">

        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>
      <tr style="height: 10px;" class="padding box">

        <td>
          test
        </td>
        <td class="box padding">
          test
        </td>

        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td class="box padding">
          test
        </td>
        <td>
          test
        </td>


      </tr>

      </tr>
    </table>

  </div>



  </div>
</body>

</html>

输入的JavaScript跨度

4 个答案:

第一

第二个和更重要的

第三

修复