单击Orkut样式div更新

Question

我正在尝试更新类似于orkut的div上的div .. div正在更新。但是当用户单击文本框时，其值最初会变为null。因此用户必须再次键入整个内容。所以我需要的是用户使用现有文本添加文本的便利性。因此，当他点击文本框时，文本框的现有值将保留在那里并允许用户附加新文本。请找到下面的代码..

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

<div class="photo_title">My text goes here and type here to add more</div>

Answer 1

您应该在点击处理程序的顶部放置类似下面的内容

if (e.target != this) return;

否则，当用户点击文本框时，将触发处理程序，因为事件将冒出来。所以你的代码最终看起来像：

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