我正在codepen.io上做一个练习，我不知道为什么，每次我在输入区域按回车键时，程序都会自行重启，尽管我添加了一些ifs语句来避免它。
我在 stackoverflow 和 Javascript 中尝试了相同的代码它不会自行重启，我将链接附加到 codepen 以便您查看问题的实际效果：
http://codepen.io/rafahuelin/pen/qRdWBy?editors=0010
我想原因是我不知道的。请你告诉我是什么导致了这种情况发生以及管理这个程序行为的方法是什么？
谢谢！
$(document).ready(function() {
// Appears the magnifier icon
var initializeSearch = false;
if (initializeSearch === false) {
initializeSearch = true;
$("#search").html("<div id='magnifier' class='search-init animated fadeIn'> <div id='magnifier-stick' class='stick-appears'></div> </div>");
console.log("after #search");
// When clicking on the icon appears the input form
var magnifierClicked = false;
$("#search").on("click", function() {
if (magnifierClicked === false) {
magnifierClicked = true;
$("#magnifier-stick").addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
console.log("after magnifier-stick");
$(".search-init").addClass("search-input").removeClass("search-init");
console.log("after search-init");
setTimeout(function() { //waits for 1.2s
$("#search").html("<div id='search-input'><form><input id='input-form' class='animated fadeIn' type='text' name='searchContent' placeholder='Type Your Search Here...'></form></div>");
console.log("after search-input");
$("#input-form").focus();
}, 1200);
} // if(magnifierClicked === false)
});
} // avoid for looping if (initializeSearch === false)
//After pressing Enter,
// $("#input-form").keypress("pressedKey", function(pressedKey){
// if(pressedKey === 13){
// //Disable textbox to prevent multiple submit
// $("#input-form").attr("disabled", "disabled");
// console.log("key pressed");
// }
// });
//send request to API
//search-input moves up
// function moveItUp() {
// $("#input-form").addClass("test"); //.addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
// }
//and the results appear down
}); // $(document).readyhtml {
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
}
.search-init {
height: 70px;
width: 70px;
border: 4px solid green;
border-radius: 35px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
-webkit-animation-duration: 3s;
-ms-animation-duration: 3s;
-moz-animation-duration: 3s;
}
#magnifier-stick.stick-appears {
height: 20px;
width: 0;
border: 2px solid green;
transform: rotate(-45deg);
top: 54px;
left: 54px;
position: absolute;
transition: all 0.2s ease;
}
.search-input,
#search-input {
height: 70px;
width: 570px;
border: 4px solid green;
border-radius: 35px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
transition: all 400ms 400ms ease;
}
#magnifier-stick.stick-disappears {
height: 0;
width: 0;
border: 2px solid green;
transform: rotate(-95deg);
top: 54px;
left: 54px;
position: absolute;
transition: all 200ms ease;
-webkit-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
}
.search-input,
#search-input {
line-height: 56px;
}
#input-form,
#input-form:focus {
width: 100%;
border-radius: 35px;
outline: none;
border: none;
padding-left: 20px;
padding-right: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
</div>