Question

我正在创建一个简单的html文件，我可以在其中添加粘贴并临时存储它们。我有一个带有提交按钮的文本表单，它应该将表单的值添加到div“#pastes”，但是当我使用jquery执行此操作时，文本会暂停一段时间，然后消失！ “检查元素”部分中的某些内容似乎也会快速闪现，但它消失得太快，我看不到它。此外，我从计算机链接到的文件在输入后将其名称从file:///Users/homework/Documents/pastebook/pastebook.html更改为file:///Users/homework/Documents/pastebook/pastebook.html?pasteinput=asdf（“asdf”是粘贴的输入。）

编辑：我的坏，我的意思是附加到div，而不是前置。

编辑：我无法使用内联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>

JS：

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

CSS：

body {
    min-height: 400px;
    width: 250px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    background-color: #F7F8E0;
}

根据评论进行编辑

我created a fiddle并将我的JS改为此

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

Answer 1

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

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

     </div>
</body>

和jQuery：

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

您的页面现在不会重新加载，您的输入会被正确附加。

Answer 2

请参阅JSFiddle上的更新代码。我已经更新了按钮标签以输入标签，并且它有效。

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

或者你可以把type =＆＃34; button＆＃34;在按钮标签中如下

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

因为按钮标签默认提交页面

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

根据评论进行编辑

2 个答案: