0

我需要做两个步骤：

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>

谢谢你：）

4

3 回答 3

2

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

});

检查此演示

希望这会帮助你。

于 2012-09-12T08:19:21.753 回答
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>');
    });

});
于 2012-09-12T08:21:28.937 回答
1

这将做你想要的，你需要使用该.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>");
    });

});​

更新：

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

});​
于 2012-09-12T08:14:16.440 回答