javascript - 使用 jquery 前置对象并消失

Question

我正在使用 jquery 编写一个 javascript 文件，以便在 html 页面上注入输入框。但是，当我在页面上注入输入并在几秒钟内输入框消失。我想知道为什么会这样。

function injectArea(data) {
    $('#test').prepend('<input type="text" class="input-block-level" placeholder=" " value="hi">');
}

PS 我正在使用 twitter 引导程序。不确定这是否会导致问题。

当我调用该函数时，我会这样做：

$(document).ready(function(){
    $(#button).click(injectArea);
});

这是我的html：

<form class="form">
    <button id ="button" class="btn btn-large btn-primary">Update Profile</button>
</form>

Answer 1

这个小提琴表明prepend您使用它的方式或方式没有任何问题。问题必须来自其他地方。我的猜测是，您可能有一个 AJAX 回调，它会在您调用它几秒钟后触发，它会覆盖您对#test.

小提琴：http:
//jsfiddle.net/jy43A/

---

更新：

你说：

出于某种原因，我的页面会自行刷新。

#button是一个<button>标签。单击它将提交表单并刷新页面（如果它针对当前页面）。用于preventDefault();停止提交默认操作：

function injectArea(data) {
    data.preventDefault();
    $('#test').prepend('<input type="text" class="input-block-level" placeholder=" " value="hi">');
}

可以看到出现文本框，然后页面刷新。在您的情况下，这看起来会有所不同，但可能与以下内容相同：

没有 preventDefault() 的效果：http:
//jsfiddle.net/jy43A/3/

这有效：

使用 preventDefault() 的效果：http:
//jsfiddle.net/jy43A/2/

更多信息：

preventDefault 信息：
http ://api.jquery.com/event.preventDefault/

Answer 2

你确定你使用的是正确的方法吗？

prepend：

<div id="a"></div>

$("#a").prepend("<span>");

<div id="a">
    <span></span>
</div>

insertBefore：

<div id="a"></div>

$("#a").insertBefore("<span>");

<span></span>
<div id="a"></div>