Home/ Questions/Q 8526125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T08:10:58+00:00

I need to do two steps: 1)Show InputBox when clicking a div . 2)Showing

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

});
    • 0