jQuery .replaceWith() 方法在点击时刷新

Question

我正在使用 jQuery .replaceWith 方法使用户能够回复或取消对 post 的评论。回复按钮的作用是在单击时创建一个文本框。但是，单击取消按钮会刷新页面，而不是在不重新加载页面的情况下返回到原始 post。如何使取消按钮正常工作？感谢您的帮助！

        <form method="post">
            <input type="hidden" name="post_id" value="{{ p.key.id() }}">
            <input type="hidden" name="user_id" value="{{ user.key.id() }}">
            <input type="button" name="reply" id="{{ p.key.id() }}" value="Reply">
        </form>

        <script>
            $("#{{ p.key.id() }}").click(function() {

                var reply = $("<textarea name='reply_content' style='resize: none; width: 550px; height: 100px;'></textarea><br><input type='submit' name='reply' value='Reply'><input type='submit' id='cancel_{{ p.key.id() }}' value='Cancel'>")

                $("#{{ p.key.id() }}").replaceWith(reply);

            });

            $("#cancel_{{ p.key.id() }}").click(function() {

                var cancel = $("<input type='button' name='reply' id='{{ p.key.id() }}'' value='Reply'>");

                $("#{{ p.key.id() }}").replaceWith(cancel);

            });

        </script>

Answer 1

编辑：现在我知道了更多信息，我正在更新我的旧答案。

新答案：

我查看了代码，意识到发生了几件事。第一个是委托问题，当您将事件绑定到对象然后将其从 DOM 中删除时会发生这种情况，这正是 replaceWith 所发生的情况。您可以在此处阅读有关委派的更多信息：

https://learn.jquery.com/events/event-delegation/

第二个问题是您让按钮提交。因此，表单试图 POST 到 SS，从而刷新。在 JS fiddle 下面；我已将它们更改为按钮，但如果您需要提交，您可以使用 e.preventDefault 来阻止表单提交。

第三个问题是我认为您试图在单击取消按钮时隐藏文本区域和回复按钮。这没有用，因为您会替换回复按钮而不是整个表单本身，这会导致按钮发生变化但文本区域会持续存在。

现在我确定在 jsFiddle 上有更简洁的方法，但我希望这能说明正在发生的事情。

我应用的修复是保存原始状态（以便取消按钮返回），修复按钮和事件，并将取消按钮更改为仅使用原始状态重新填充。

编辑 2：我忘记附上新的 fiddle！

https://jsfiddle.net/6s03k0eb/5/

旧答案：

So there are a couple of things going on here. First The below is an invalid HTML ID
<input type="button" name="reply" id="{{ p.key.id() }}" value="Reply">
Id's can't start with a number and should most definitely not contain brackets. If this id, is being populated by the server then you definitely need to update the jQuery with the proper ID and not the server side variable:

Incorrect
  $("#{{ p.key.id() }}")
Correct
  $("#someID")
The reason your page keeps on refreshing is because you have a JS error due to the invalid jQuery selector so the button does its default action which is to submit the form.

Here is a JS fiddle showing the code working with the proper ID values: https://jsfiddle.net/6s03k0eb/

jQuery .replaceWith() 方法在点击时刷新

jQuery .replaceWith() method refreshes on click

html

javascript

forms

jquery

replacewith