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来阻止表单提交。

第三个问题是我认为你试图隐藏取消按钮点击上的textarea和回复按钮。这不起作用，因为你会更换回复按钮而不是整个表单本身导致按钮改变但textarea仍然存在。

现在我确信在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小提琴，显示使用正确ID的代码   值：https://jsfiddle.net/6s03k0eb/

jQuery .replaceWith（）方法在点击时刷新

1 个答案: