Javascript Orkut样式div在单击时更新

我正在尝试更新一个类似于orkut的div。。div正在更新中。但是，当用户单击文本框时，其值最初变为null。因此，用户必须再次键入整个内容。因此，我需要的是一种方便，让用户能够将文本添加到现有文本中。因此，当他单击textbox时，textbox的现有值将保留在那里，并允许用户添加新文本。请找到下面的代码

$(document).ready(function () {

    $('.photo_title').click(

    function(e){

        var text = $(this).text();
        $(this).val('');

        $('<input type="text" value="sdfsdfsdfsdf"    />').appendTo($(this)).val(text).select().blur(
            function(){
                var newText = $(this).val();
                    if(newText==""){newText="enter text "}

                $(this).parent().text(newText),find("form input:text" ).remove();

        });
    }); 
});

HTML

---

您应该在单击处理程序的顶部放置如下内容

if (e.target != this) return;

否则，当用户在文本框中单击时也会触发处理程序，因为事件将冒泡。因此，您的代码最终将看起来像：

$(document).ready(function () {
    $('.photo_title').click(
        function(e){
            if (e.target != this) return;
            ...
        }
    );
});

---

注意代码格式您还应该更改$this.val；到$this.html；谢谢你，伙计。。我把它放在var text=$this.text之后；而且很好用。。我仍然不知道我们为什么要用它。。我是JS的完全初学者：用户单击一次后，输入框将插入到div中。如果用户单击输入框，该单击事件将首先由连接到输入框的任何单击处理程序处理。然后，事件沿着DOM树向上运行，并由沿途的任何其他单击处理程序处理。由于photo_title div是输入框的父项，因此会再次调用其单击处理程序，并且由于它现在不包含文本，因此会将输入值设置为空字符串。

$(document).ready(function () {
    $('.photo_title').click(
        function(e){
            if (e.target != this) return;
            ...
        }
    );
});