How to hide / show a <div> tag based on where the user has clicked?

Question

I have a div container. If the user clicks on this div container, then this is replaced with an input box.
If the user click on anywhere else on the page other than the input box, then I want the previous div to be shown again.

This is what I have managed to do until now. This works fine only once. This is the javascript code:

$(document).ready(function() {
$(".new-section").click(function(event) {
    $(this).replaceWith('<div class="span8 offset1 create-section"><input type="text" placeholder="Enter the title of the section"></div>');
    event.stopPropagation();
});

$(".create-section").click(function(event) {
    event.stopPropagation();
});

$(document).click(function(event) {
    $(".create-section").replaceWith('<div class="span8 offset1 new-section"><p>Click to add a new section</p></div>');
});
});

This is the HTML code:

<div class="span8 offset1 new-section">
    <p>
    Click to add a new section
    </p>
</div>

After replacing the input with the div, further clicks on the div do not bring the input box again. It seems like the click event is only trigerred once. Basically what I want is:
1. User clicks on div
2. Div replaced with input
3. User clicks outside input
4. Input replaced with div
5. User clicks on div again and the input box comes back.

The cycle repeats. As of now, I have managed to get this working only once. Any idea what I am doing wrong?

EDIT: I do not want to allow the to be shown again, if the user clicks on the . Only if the user clicks on anywhere else in the web page (other than the ), the should be shown again. In other words, a toggle between the and the elements.

Answer 1

As you are creating the element dynamically you should delegate the event:

$(document).on('click', '.new-section', function(event) {

However toggling visibility of the elements is more efficient than replacing them.

<div class="new-section">
    <p>
        Click to add a new section
    </p>
</div>
<div class="span8 offset1 create-section">
    <input type="text" placeholder="Enter the title of the section">
</div>

$(document).ready(function() {
    var $section = $(".new-section"),
        $div = $('div.span8');

    $section.click(function(event) {
        $section.hide();
        $div.show().find('input').focus()
    });

    $div.find('input').blur(function(event) {
        $section.show();
        $div.hide()
    });
})

http://jsfiddle.net/34wHG/

Note that I have used focus and blur events, you can also create a button which generates the section and hide the div element when button is clicked.

Answer 2

Since you are creating 'new-section' s dynamically, you can not bind to them directly.

Instead you should bind at a higher level, doucment or container div, and listen to the delegated event, with the latest JQuery you do this with 'on' method.

Check section 'Direct and delegated events' on http://api.jquery.com/on/

$(document).on("click", ".new-section", function(event) {
    $(this).replaceWith('<div class="span8 offset1 create-section"><input type="text" placeholder="Enter the title of the section"></div>');
    event.stopPropagation();
});

$(document).on('click', ".create-section", function(event) {
    event.stopPropagation();
});

Answer 3

You could maybe have a dummy in the background so that any click on the dummy would change the div or input.

Html:

<div id="page1" >
    <div id=dummy"></div>
    <div id="content></div>
</div>
<div id="page2">
    <div id=dummy"></div>
    <input/>
</div>

then just change z-index of pages depending on dummy click.

Answer 4

Quick and dirty inline editing(minus the actual code...too lazy to it):

<div id="clickable"></div>
<textarea id="edit_clickable"></textarea>

$('#clickable').click(function(){
//get text of #clickable
//hide clickable
//add the text to textarea
//show textarea
});
$(document).click(function(){
//get textarea text
//hide textarea
//update div text
//show div
});