How to use replaceWith jQuery?

Question

I need to do two steps:

1)Show InputBox when clicking a div . 2)Showing the div back when mouse is out of that inputbox.

step #2 does not work.

<html>
    <title>a</title>
    <head>
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#field').click(function() {
                $(this).replaceWith( "<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
            });

            $('#field').mouseout(function() {
                $(this).replaceWith( "<div id=\"field\">" + $(this).text() + "</div>");
            });     
         });
    </script>
    </head>
    <body>
        <div id="field">hello there:)</div>
    </body>
    </html>

thank you:)

score 2 · Answer 1 · answered Sep 12 '12 at 08:19

You can try this, make different id, when div say it "field" and while input say it "txtfield"

$(function() {
    $('#container').on('click', '#field', function() {
        $(this).replaceWith( "<input type=\"text\" name=\"fname\" id=\"txtfield\" value=\"" + $(this).text() + "\">");
    });

     $('#container').on('mouseout', '#txtfield', function() {
        $(this).replaceWith( "<div id=\"field\">" + $(this).val() + "</div>");
    });

});

Check this DEMO

Hope this will help you.

score 2 · Accepted Answer · answered Sep 12 '12 at 08:21

of course this will not work, since you replace the item itself so $(this) will refer to nothing.

so you must call the mouse out binding after creating the new #field element or you can use the .on methods http://api.jquery.com/on/

Note : you can use single quote instead of double quote save escaping ;)

$('#field').click(function () {
    $(this).replaceWith('<input  id="field" type="text" value="' + $(this).text() + '>');

    // here you must call the mouse out binding
    $('#field').mouseout(function () {
        $(this).replaceWith('<div id="field">' + $(this).text() + '</div>');
    });

});

Daedalus · Answer 3 · 2012-09-12T08:28:25.747

This will do what you want, you need to use the .on() method in order to bind events to dynamically created elements.

The .on() requires either two, or three parameters. The first parameter is the event, while the second is either the function to execute, or the dynamic element to be bound to. If you are binding to a dynamic element, you need to attach the method to a container element. The last parameter in the case of dynamic attaching is of course the function to execute.

<div id="container">
    <div id="field">hello there:)</div>
</div>

$(function() {
    $('#container').on('click', '#field', function() {
        $(this).replaceWith("<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
    });

    $('#container').on('mouseout', '#field', function() {
        $(this).replaceWith("<div id=\"field\">" + $(this).val() + "</div>");
    });

});

UPDATE:

$(function() {
    $('#container').on('click', '#field', function() {
        if (!$(this).is('input')) {
            $(this).replaceWith("<input type=\"text\" name=\"fname\" id=\"field\" value=\"" + $(this).text() + "\">");
        }
    });

    $('#container').on('mouseout', '#field', function() {
        if ($(this).is('input')) {
            if ($(this).val() != '') {
                $(this).replaceWith("<div id=\"field\">" + $(this).val() + "</div>");
            }
            else {
                $(this).replaceWith("<div id=\"field\">hello there:)</div>");
            }
        }
    });

});

thank you , why does not it allow me to change text manually in the inputbox? and if text is changed the inputbox disappears ? — eawedat, Sep 12 '12 at 08:17
@eawedat Because of the bound click. A moment while I fix it. — Daedalus, Sep 12 '12 at 08:19
@eawedat As an extra example, you could write the events like this http://jsfiddle.net/lollero/5xP9g/1/ — Joonas, Sep 12 '12 at 08:19

How to use replaceWith jQuery?

3 Answers3