Question

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
    $("#p").replaceWith($("#p1"));
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
</body>
</html>

此代码正常工作，直到我执行表单操作..当我在表单中保留该提交时，此代码不起作用。如何在表单提交后替换该div。感谢。

Answer 1

你可以尝试这个。希望它有所帮助！

$(document).ready(function(){
$("#submit").click(function(event){
    $("#p").replaceWith($("#p1").text());
    return false;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>

Answer 2

你需要text方法。你以前删除了整个元素。您只需要删除文本值

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
    $("#p").replaceWith($("#p1").text());
});
});
</script>
</head>
<body>

<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>

<input type="submit" id="submit" name="submit" value="Search"/>

</body>
</html>

Answer 3

指定要替换的内容：

 $(this).replaceWith("<div><p>Replacement</p></div>");

Answer 4

表单提交需要使用AJAX完成，然后才能实现您想要的目标。

否则表单将提交，页面将刷新，这将导致重新初始化脚本。

Answer 5

由于Pooojaaqaa和Rayon提到在表单标记上设置action属性的时间，表单将被提交并重新加载页面（即使action="#"）。要捕获此操作，您需要捕获表单的submit事件，而不是按钮的click事件。在submit事件处理程序中，您需要在传递给处理函数的事件对象上调用preventDefault()，如下所示。

<form id="frmSearch" action="#" method="get">
   <input type="submit" id="submit" name="submit" value="Search"/>
</form>

$("#frmSearch").submit(function(ev){
    ev.preventDefault();
    $("#p").replaceWith($("#p1").text());
});

表单提交后替换div

5 个答案: