0

我想在单击文本后显示提交按钮。

因此，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）

第二次编辑：

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

4

1 回答 1

1

setTimeout我们可以在函数中使用 1 毫秒的延迟来在一定程度上作弊.on('blur')：

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

JSFiddle 演示。

于 2013-10-31T13:02:24.937 回答