Javascript 为什么jquery前面的文本会在一瞬间出现，然后突然消失？_Javascript_Jquery_Html_Css

Javascript 为什么jquery前面的文本会在一瞬间出现，然后突然消失？

javascript jquery html css

Javascript 为什么jquery前面的文本会在一瞬间出现，然后突然消失？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个简单的html文件，在那里我可以添加粘贴并临时存储它们。我有一个带有submit按钮的文本表单，它应该将表单的值预先添加到div“#pastes”中，但当我使用jquery执行此操作时，文本会在瞬间预先添加，然后消失！在Inspect Element部分似乎也有一些东西快速闪烁，但它消失得太快了，我看不到它。此外，我从我的计算机链接到的文件将其名称从file:///Users/homework/Documents/pastebook/pastebook.html至file:///U

我正在制作一个简单的html文件，在那里我可以添加粘贴并临时存储它们。我有一个带有submit按钮的文本表单，它应该将表单的值预先添加到div“#pastes”中，但当我使用jquery执行此操作时，文本会在瞬间预先添加，然后消失！在Inspect Element部分似乎也有一些东西快速闪烁，但它消失得太快了，我看不到它。此外，我从我的计算机链接到的文件将其名称从

file:///Users/homework/Documents/pastebook/pastebook.html

至

file:///Users/homework/Documents/pastebook/pastebook.html?pasteinput=asdf

输入后（“asdf”是粘贴的输入。）

编辑：我的错，我的意思是附加到div，而不是prepend

编辑：我不能使用内联javascript，因为我想使它成为一个Chrome扩展

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link type="text/css" rel="Stylesheet" href="pastebook.css">
        <script src="jquery-1.11.1.min.js"></script>
        <script src="pastebook.js"></script>
    </head>
    <body>
        <div id="form">
            <form id="pasteform">
                <div id="input"><input type="text" name="pasteinput"></div>
                <div id="button"><input type="submit" value="Submit"></div>
            </form>
        </div>
        <div id="pastes">

        </div>
    </body>
</html>

CSS:

根据评论进行编辑我把我的JS改成了这个

$(document).ready(function() {  
   $("#button").click(function() {             
        $("#pastes").append( $("input:first" ).val());         
   });     
});

如注释中所述，提交表单将重新加载页面，因此附加的输入将丢失。只需更改您的HTML：

<body>
     <div id="form">
          <input type="text" name="pasteinput">
          <button type="button" onclick="appendInput()">Append</button> 
     </div>
     <div id="pastes">

     </div>
</body>

您的页面现在无法重新加载，您的输入将被正确附加。

请参阅上的更新代码。我已经更新了按钮标签输入标签，它的工作

<input type="button" id="button" value="Paste!"></input>

或者您可以将type=“button”放在按钮标签中，如下所示

<button type="button" id="button">Paste!</button>

粘贴！

因为默认情况下按钮标记提交页面

您认为input type=“submit”的作用是什么？因为您正在提交表单。。。当您在提交表单的同时附加输入文本时，会重新加载表单，导致表单重置。提交后重新加载页面。。。那么，当它显示原始页面时，您将如何获得追加输入文本呢？如果您不想提交表单，为什么还要提交表单呢？然后在其他按钮上执行相同的操作，但不要在提交按钮上执行。使用type=“button”进行简单输入，并调用相同的代码来追加文本。很抱歉，它会工作的，我忘了提及；我不想使用内联JS，因为我想让它成为一个Chrome扩展；清单2.0不允许内联js。您只需将jQuery更改为

$（“按钮”）。单击（函数（）{$（“#粘贴”）。追加（$（（$（“输入：第一”）.val（））；}）

并删除HTML中的onclick，然后：）。

function appendInput() {
        $("#pastes").append( $("input:first" ).val());
}

<input type="button" id="button" value="Paste!"></input>

<button type="button" id="button">Paste!</button>