0

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.

Improve this question

5 Answers 5

Reset to default
2 
$(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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

that's what i did only it must be delegated because <p> might not be loaded during page load
if page is loaded then <p> must be loaded.Because <p> is inside your document only. "If you enter to Toilet, do you think your head can be outside" ...:D....I think you forgot to write the code inside $(document).ready(). That is why it was not registering the handler..may be
No because <p> is added with an ajax call. It can be without p if there are no Phrases stored in my db
2

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);

});
Improve this answer

4 Comments

Thx...I actually changed it a bit and instead of using the whole div I used the p inside that div as "target area" like this: $("phrases").on('click', ".predefined-phrase p", function()...); I had to change the children() etc cause the $(this) object was different now. I suppose your method works too right?
Isn't $("phrases") to be $(".phrases")?
@Apostolos it should!
@Unknown It was a typo. not copying pasting....It's correct on my code...edited here.
1

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)'
});
Improve this answer

Comments

1

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 + '" />')
});
Improve this answer

Comments

0

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" />');
Improve this answer

5 Comments

Why not use id starting from number?Is it not allowed?
it's a w3c recommendation.
@Apostolos - its just bad practice, and not recommended (in javascript/perl/php, if you start a variable with a number, it will die :))
Yes I know that, but number is the value of the variable not the variable itself. Its like saying id="1" and not 1 = id or something. So its better to be like id="id_1"?
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")." -6 Basic HTML data types

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.