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），但即使我甚至无法提醒（）因为点击按钮后它就会消失。我怎样才能解决这个问题？我不希望在点击此文本之前显示此按钮。

修改

答案是（如 James Donnelly 所说）来设置超时：

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

BUT

现在，当我通过POST发送时，我的网址看起来像这样：

[mysite的] CMS /内容/保存/ 1 =由...由... +++++++++++++++++++++＆安培;提交=变化+标题 这是另一个我无法解决的问题：P （它应该是这样的：** [mysite] cms / content / save / 1）

第二次编辑：

如果有人遇到此问题：将超时设置为~200，然后将form.method更改为post。

Answer 1

我们可以使用setTimeout在.on('blur')函数内延迟1毫秒，在某种程度上欺骗这个：

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

JSFiddle demo

无法提交，因为“模糊”正在收费

1 个答案: