Question

我需要做两个步骤：

1）单击div时显示InputBox。 2）当鼠标离开输入框时显示div。

步骤＃2不起作用。

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

谢谢你：）

Answer 1

你可以尝试这个，制作不同的id，当div说“field”时输入说“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>");
    });

});

选中 DEMO

希望这会对你有所帮助。

Answer 2

当然这不起作用，因为您替换了项目本身，因此$(this)将不会引用任何内容。

所以你必须在创建新的#field元素后调用鼠标输出绑定或者您可以使用.on方法 http://api.jquery.com/on/

注意：您可以使用单引号而不是双引号保存转义;）

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

});

Answer 3

This will do what you want，您需要使用.on()方法将事件绑定到动态创建的元素。

.on()需要两个或三个参数。第一个参数是事件，第二个参数是要执行的函数，或者是要绑定的动态元素。如果要绑定到动态元素，则需要将该方法附加到容器元素。动态附加的最后一个参数当然是执行的函数。

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

});

如何使用replaceWith jQuery？

3 个答案: