Как выбрать предыдущий элемент с помощью jquery «on»?

Question

Я пытаюсь отредактировать текст на label. Я хочу:

1. Показать ярлык и скрытый текст.
2. При щелчке метки: ярлык получает скрыть и текст. В окне показано, где я могу редактировать текст.
3. В поле «Ввод» текстовое поле должно скрываться, а ярлык должен отображать введенный текст.

Вот пример кода. Но он не работает должным образом.

<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

Заканчивать этот 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 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>

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

}); 

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. 
 
\t $curr.show(); 
 
}); 
 
$("#label").on('click',function() { 
 
\t $("#label").hide(); 
 
\t $("#text").show(); 
 
\t $("#text").blur(function() { 
 
\t \t $("#label").show(); 
 
\t \t $("#text").hide(); 
 
\t \t $("#label").html($("#text").val()); 
 
\t }); 
 

 
}); 
 

 
    });

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>