CODEWITHSUNDEEP
javascriptjqueryhtml
Apostolos
Apostolos

Reputation: 8101

replace a <p> element with an input element

I have a p element which I want to replace with an input element when user clicks on it. The

might not be present during page load so I use delegate to catch the click event.

html(after <p> was loaded)

<div class="phrases">
    <div class="predefined-phrase>
        <p id="1">A predefined phrase"</p>
    </div>
</div>

I want it to be like this

<div class="phrases">
    <div class="predefined-phrase">
        <input type="text" id="1" class="form-control input-sm" value="A predefined phrase">
    </div>
</div>

My js file has the following code:

$(".phrases").on('click', ".predefined-phrase", function (event){
    event.preventDefault();
    var phrase = $(this).children().text();
    var id = $(this).children().attr('id');
    var input = '<input type="text" class="form-control input-sm" id="'+id+'" value="'+phrase+'">';
    $(this).children().remove();
    $(this).append(input);

});

<p> is replaced normally by input but i cannot type anything. I can only type if left click is pressed on input box continiously. I also want to catch a keypress event on the new input so to edit or to delete the specific phrase. But I cannot even type on the input box. Why is this happening? Can i normally catch the keypress event after I have appended the input (and works as it should) inside the click event callback? The point is that after user presses the phrase is edited with ajax and the input box dissappears and p is loaded back with the new edited phrase or fully deleted.

Upvotes: 0

Views: 816

Answers (5)

Tuhin
Tuhin

Reputation: 3373

$(function(){
    $('.predefined-phrase p').click(function() {
    var id = $(this).attr('id');
    var phrase = $(this).text();
    var newInput="<input type='text' id='"+id+"' value='"+phrase+"' />";
    $(this).replaceWith(newInput);
    });
});

DEMO FIDDLE

Upvotes: 2

A. Wheatman
A. Wheatman

Reputation: 6378

I would suggest the next changes:

<div class="predefined-phrase">
    <input type="text" data-id="1" class="form-control input-sm" value="A predefined phrase">
</div>

jQuery script: 

$('.predefined-phrase').click(function() {
    var id = $('p', this).attr('data-id');
    var value = $('p', this).text();

    $('p', this).replaceWith('<input type="text" data-id="' + id + '" class="form-control input-sm" value="' + value + '" />')
});

Upvotes: 1

David
David

Reputation: 4873

Well, this is a native JS solution, but hopefully it will point you in the right direction, or if you an use it instead of jQuery, that works too. Not that I've changed your ID to not start with a number, as mentioned by C-link, as that is not allowed.

document.getElementById("n1").addEventListener("click", function filler(){
    this.outerHTML = '<input type="text" id="' + this.id + '" class="form-control input-sm" value="' + this.innerHTML + '" />
    this.removeEventListener("click" filler)'
});

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Just check the target. If it is a input, do nothing :

$(".phrases").on('click', ".predefined-phrase", function (event){
    if($(event.target).is('input')) return;
    event.preventDefault();
    var phrase = $(this).children().text();
    var id = $(this).children().attr('id');
    var input = '<input type="text" class="form-control input-sm" id="'+id+'" value="'+phrase+'">';
    $(this).children().remove();
    $(this).append(input);

});

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

First of all, don't use id starting from number.

And for your solution you can use replaceWith method like below:

$('#your_id').replaceWith('<input type="text" id="your_id" class="form-control input-sm" value="A predefined phrase" />');

Upvotes: 0

Related Questions