ページのどこをクリックしても実行方法の切り替え

ページに同じモジュールがたくさんあると仮定します.各モジュールにはタイトルとタイトルのinputボックスがあります.

<div>

<span class="imgtitle"  > 1</span>

<input type="text" value="" class="editimgtitle">

</div>

<div>

<span class="imgtitle"  > 2</span>

<input type="text" value="" class="editimgtitle">

</div>

imgtitleをクリックすると、現在の要素が消え、editimgtitleが表示され、ページをクリックしてどこでも切り替えられます.
Inputボックスの値はimgtitleの主な使用方法に割り当てられます

e.stopPropagation();

$("#mypiclist").delegate(".imgtitle","click",function(e){

        e.stopPropagation();

        var html = $(this).html();

        $(this).hide();

        $(this).next().show().val(html);

        $(this).next().focus();

     });

     $(document).bind('click',function(){

         $(".editimgtitle").hide();

         $(".imgtitle").show();

     });

     $("#mypiclist").delegate(".editimgtitle","focus",function(e){

         var edit = $(this).parent().siblings().find(".editimgtitle");   // 

         edit.hide();

         edit.prev(".imgtitle").show();

      });

     $("#mypiclist").delegate(".editimgtitle","click",function(e){

         e.stopPropagation();

       });

     /*  blur  */

     $("#mypiclist").delegate(".editimgtitle","blur",function(e){

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

         $(this).prev().html(val);

      });