Question

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

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

P.S。我使用twitter bootstrap。不确定是否会导致问题。

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

$(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">');
}

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

效果WITHOUT preventDefault（）：
http://jsfiddle.net/jy43A/3/

这有效：

效果WITH preventDefault（）：
http://jsfiddle.net/jy43A/2/

更多信息：

preventDefault info：
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>

使用jquery前置对象并消失

2 个答案: