How to use replaceWith jQuery?

StackOverflow https://stackoverflow.com/questions/12383752

  •  01-07-2021
  •  | 
  •  

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

Was it helpful?

Solution

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

});

OTHER TIPS

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.

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

});​
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top