代码之家 › 专栏 › 技术社区 › eawedat

如何使用replaceWith jQuery?

replacewith jquery

eawedat · 技术社区 · 13 年前

我需要做两个步骤:

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>

谢谢:)

3 回复 | 直到 13 年前

amd 13 年前

当然,这是不起作用的,因为您这样替换项目本身 $(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>');
    });

});

Yograj Gupta 13 年前

您可以尝试这样做,使不同的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>");
    });

});

检查这个 DEMO

希望这对你有帮助。

Daedalus Jhilom 13 年前

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

});â