jQuery .replaceWith() 方法在单击时刷新[重复]

Question

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

        <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 中删除时，就会发生该替换问题。您可以在此处阅读有关委托的更多信息：

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

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

第三个问题是我相信您试图在单击取消按钮时隐藏文本区域和回复按钮。这不起作用，因为您将替换回复按钮而不是整个表单本身，这会导致按钮更改但文本区域仍然存在。

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

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

编辑 2：我忘了附上新的小提琴！

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

旧答案：

所以这里发生了一些事情。首先下面是一个 无效的 HTML ID

<input type="button" name="reply" id="{{ p.key.id() }}" value="Reply">

ID 不能以数字开头，并且绝对不能包含 括号。如果服务器正在填充此 ID，那么您 肯定需要用正确的 ID 更新 jQuery，而不是 服务器端变量：

不正确

  $("#{{ p.key.id() }}")

正确

  $("#someID")

你的页面不断刷新的原因是因为你有一个 JS 由于无效的 jQuery 选择器导致的错误，因此按钮执行 提交表单的默认操作。

这是一个 JS fiddle，显示了使用正确 ID 的代码 值：https://jsfiddle.net/6s03k0eb/