首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >输入的JavaScript跨度

输入的JavaScript跨度
EN

Stack Overflow用户
提问于 2018-07-24 08:12:17
回答 3查看 34关注 0票数 -1

我正在处理我的网站需求中的一种情况,我希望用户能够单击一些文本(由<span>包围),并将其转换为输入框,然后在编辑或失去焦点后返回到纯文本。

我发现到处都是东西,但没有一个是真正有效的!

完全相同的jsfiddle在我的实际网页中不起作用。这是我的页面的代码,我希望有人向我解释为什么它不工作,并帮助我修复它。

代码语言:javascript
复制
<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>

我在试着把这部分变成文本框

代码语言:javascript
复制
  <br>
    Before....

        <span>
              test
           </span>


    <br>
EN

回答 3

Stack Overflow用户

发布于 2018-07-24 08:18:53

.live()更改为.on(),因为.live()函数已弃用。

下面是工作代码:

代码语言:javascript
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-07-24 08:17:19

jQuery 1.7中弃用了.live(),1.9中将其完全删除。您使用的是3.3.1,因此您应该使用.on()

票数 1
EN

Stack Overflow用户

发布于 2018-07-24 08:22:49

如果您运行堆栈片段,您将看到一个错误,显示为$(...).live is not a function。它在v1.9中被删除了。

您必须使用on()创建自己的事件委派

代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51488755

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档