如何使用 jquery "on" select 前一个元素？

Question

我正在尝试编辑 label 上的文本。我想：

显示标签和隐藏文本框。
单击标签时：标签隐藏，文本框显示我可以编辑文本的位置。
按回车键，文本框应隐藏，标签应显示输入的文本。

这是示例代码。但是它没有按预期工作。

<h4>Editable labels (below)</h4>
<span class="k-link">
<label class="pull-left">Dashboard</label>
<input class="clickedit" type="text" id="731"/>
</span>

Demo

Answer 1

这是您想要的功能吗？

$(document).on('click', '#label', function() {
  var that = $(this);
  that.hide();
  $('#731').removeClass('hidden');
});
$(document).on('focusout', '#731', function() {
  var that = $(this);
  var val = that.val();
  that.hide();
  $('#label').after('<span>' + val + '</span>');
});

.hidden { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Editable labels (below)</h4>
<span class="k-link">
<label id="label" class="pull-left">Dashboard</label>
<input class="clickedit hidden" type="text" id="731"/>
</span>

Answer 2

这个有效：

 $(document).ready(function(){

    $(".clickedit").hide()

    $(".pull-left").on("click", function(){
        $(this).hide()
        $(".clickedit").show()
    });

    $(".clickedit").on("blur", function(){
        $(this).hide()
        $(".pull-left").text($(this).val()).show()
    });

});

Answer 3

看看这个 Demo。

从

更改代码

 $('.k-link').on('click', ".clickedit.prev()", function (event) {..

进入

 $('.k-link').on('click', ".pull-left", function (event) {..

并为

添加内联 css 样式

 <input class="clickedit" type="text" id="731" style="display:none"/>

Answer 4

这是工作检查它我刚刚编辑了 .clickedit.prev() 的选择器，并将其更改为 .pull-left

    $('.k-link').on('click', ".pull-left", function (event) {
    $(this).hide();
    $(this).next().show().focus();
    event.stopPropagation();
    });

http://jsfiddle.net/anisboukhris/qho0uLzv/

Answer 5

可以试试这个：

  $(document).ready(function(){
$("#f1").hide();
$("#text").hide();
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).on('click',function() {

  $curr = $curr.prev();// this will go to previous div as you have asked how to get previous element.
  $curr.show();
});
$( "#label" ).on('click',function() {
 $("#label").hide();
 $("#text").show();
 $( "#text" ).blur(function() {
  $("#label").show();
  $("#text").hide();
  $("#label").html($("#text").val());
 });

});

  });

 div {
    width: 150px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
  }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="f1"><span id="label">Came to previous div</span><input type="text" id="text" /></div>

<div id="start"></div>

<p><button>Go to Prev</button></p>

如何使用 jquery "on" select 前一个元素？

How to select the previous element using jquery "on"?

javascript

jquery

jquery-on