How to select the previous element using jquery “on”?

Question

I am trying to edit the text on a label . I want to:

1. Show a label and hidden text Box.
2. On click of label: label gets hide and text Box shows where I can edit text.
3. On Enter, text Box should hide and label should display the entered text.

Here is the sample code. But its not working as expected.

<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

Check out this Demo .

Change the code from

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

into

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

And add inline css style for

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

Answer 2

Is this the functionality you want?

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

This works:

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

this is working check it i have just edit the selector it was .clickedit.prev() and i have change it to .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

may be try this:

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