javascript - 「blur」が担当しているため送信できません

Question

テキストをクリックした後に送信ボタンを表示したい。

したがって、HTML は次のようになります。

 <td align="left" class="editable_td">
  <form action='cms/content/save/2' type='POST'>
   <p class="editable seo" >{{ news['nazwa']|raw }}
   </p>
   <input type='submit' name='submit' class='button2' style='display:none;' value='change title'>
 </form>
</td>

そして私のjquery：

 $(document).ready(function () {

       $('.button2').on('click',function() {
         alert(2);
        });

       var text;
       var klasa;

       $(".editable_td").on("click", "p.editable",function() {
         var parent = $(this).parent();
         text = $(this).text();
         klasa = $(this).attr('class');
         $(this).siblings('.button2').show();
         $(this).replaceWith("<input class='editable_text' name='nazwa' type='text' value='"+text+"'>");
         parent.children(":text").focus();
         return false;
       });

       $(".editable_td").on("blur", '.editable_text',function() {
         $(this).siblings('.button2').hide();
         $(this).replaceWith("<p class='editable "+klasa+"'>"+text+"</p>");
        });

});

もちろん、アラート(2)ではなく、このフォームを送信したいのですが、ボタンをクリックすると単に消えるため、アラート()さえできません。どうすればこれを修正できますか? このテキストをクリックする前にこのボタンを表示したくありません。

編集

答えは（ジェームズ・ドネリーが言ったように）タイムアウトを設定することです：

 setTimeout(function() {
    $(this).siblings('.button2').hide();
    $(this).replaceWith("<p class='editable "+klasa+"'>"+text+"</p>");
}, 1);

しかし

現在、POST 経由で送信しているとき、URL は次のようになります。

[mysite]cms/content/save/1?nazwa=Nazwa++++++++++++++++++++++&submit=change+title とここで私ができない別の問題が発生します解決:P (次のようにする必要があります: **[mysite]cms/content/save/1 )

2番目の編集:

この問題が発生した場合: タイムアウトを ~200 に設定し、form.method を post に変更します。