Geek asks and answers

Change p element with jquery text box input field

I ran into a small problem when triggering a jquery event to replace a p or span element with a text field and onblur event to return back to the p or span field.

Demo here http://jsfiddle.net/yXcZG/

Works well the first time when you click on the text p, but failed by repeating this process a second time.

Can someone help me where the problem should be

+3
source share
5 answers

jQueries.on selecor , ajax , . $('.myClass').click(funcction(){});, , $('.cmtedit').on(..., , .. , . , .on, document, !: -)

.on( [, ] [, ], (eventObject))

$(document).on('click', '.cmtedit', function (e) {
    console.log(this);
   TBox(this);
});

.

http://jsfiddle.net/yXcZG/3/

console.log();, Chrome Firefox. IE !

+3

, obj,

 $(obj).remove();

TBox

RBox, , click

$(".cmtedit").live('click', function (e) {


$(".cmtedit").on('click', function (e) {

http://api.jquery.com/live/

0

click <p> RBox(). : (, : http://jsfiddle.net/yXcZG/5/)

$(".cmtedit").on('click', function (e) {
   TBox(this);
});

$("input").live('blur', function (e) {
   RBox(this);
});
function TBox(obj) {
        var id = $(obj).attr("id");

        var tid = id.replace("cmt_edit_", "cmt_tedit_");
        var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() });
        $(obj).parent().append(input);
        $(obj).remove();
        input.focus();
}
function RBox(obj) {
    var id = $(obj).attr("id");

    var tid = id.replace("cmt_tedit_", "cmt_edit_");
    var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() });
    $(obj).parent().append(input);
    $(obj).remove();

    $(".cmtedit").on('click', function (e) {
     TBox(this);
   });
}​
0

, ( ) :

<style>
    ​#cmt_edit_323 input { display: none; }​
</style>

<div id="sample">
     <p id="cmt_edit_323" class="cmtedit"><span>Sample Text</span><input type="text"></input>    </p>
</div>​​​​​

<script>
$(".cmtedit").on('click', function (e) {
   TBox(this);
});

$(".cmtedit input").on('blur', function (e) {
   RBox(this);
});

function TBox(obj) {
        var input = $(obj).find("input");
        var span = $(obj).find("span");
        input.attr('value', span.text()).show().focus();
        span.hide();            

}
function RBox(obj) {
        var input = $(obj);
        var span = $(obj).parent().find("span");
        span.html(input.attr('value')).show();
        input.hide();
}​
</script>

: JSFiddle

0

, .

@ppumkin - , .

I tried to check many other events to solve this problem, but with no luck. Therefore, the simplest solution for me was to make a simple check before adding an element to a function RBox():

if ($("#" + tid).length == 0) {
    $(obj).parent().append(input);
}

Other than that, I used the .on () method for blurhow . live () is deprecated and is no longer recommended.

0
source

More articles:


All Articles