如何使用jquery“on”选择前一个元素？答案

【问题标题】：How to select the previous element using jquery "on"?如何使用jquery“on”选择前一个元素？
【发布时间】：2015-04-21 06:27:05
【问题描述】：

我正在尝试编辑 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

【问题讨论】：

使用contenteditable 属性也可能是一个很好的方法。

标签： javascript jquery jquery-on

【解决方案1】：

看看这个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"/>

【讨论】：

感谢您的回答。这就是我一直在寻找的。但是，当我在我的应用程序中运行此代码时，我收到一个 javascript 错误，提示“未捕获的 ReferenceError：隐藏未定义”。但在小提琴中它似乎正在工作。你能帮我解决这个问题吗？
你能告诉我你在小提琴代码中遇到了什么错误吗？
嗨，我现在得到了解决方案。非常感谢你。 :)

【解决方案2】：

这是你想要的功能吗？

$(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>

【讨论】：

【解决方案3】：

这行得通：

 $(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()
    });

});

【讨论】：

【解决方案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/

【讨论】：

感谢您的回答。这就是我一直在寻找的。但是，当我在我的应用程序中运行此代码时，我收到一个 javascript 错误，提示“未捕获的 ReferenceError：隐藏未定义”。但在小提琴中它似乎正在工作。你能帮我解决这个问题吗？
尝试设置jquery的最新版本可能是ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

【解决方案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>

【讨论】：