javascript - Prepend object using jquery and disappear -

i writing javascript file using jquery in order inject input box on html page. however, when inject input on page , within few second input box disappear. wondering why happen.

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

p.s. m using twitter bootstrap. not sure if causes problem.

when call function this:

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

this html:

<form class="form">     <button id ="button" class="btn btn-large btn-primary">update profile</button> </form> 

this fiddle shows there nothing wrong prepend or way using it. issue must come elsewhere. guess may have ajax callback fires few seconds after call overriding change making #test.

fiddle:
http://jsfiddle.net/jy43a/

---

update:

you said:

for reason page refresh itself.

#button <button> tag. clicking on submit form , refresh page (if targets current page). use preventdefault(); stop submit default action:

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

you can see text box appears, page refreshes. different in case, along same lines this:

the effect without preventdefault():
http://jsfiddle.net/jy43a/3/

and works:

the effect preventdefault():
http://jsfiddle.net/jy43a/2/

more info:

preventdefault info:
http://api.jquery.com/event.preventdefault/