2
Я работаю над упражнением на codepen.io, и я не знаю, почему, каждый раз, когда я нажимаю клавишу ввода во входной области, программа перезапускает себя, хотя я добавил некоторые инструкции ifs для избегай это.Почему мой Javascript перезагружается каждый раз, когда я нажимаю Enter в области ввода? codepen прилагается
Я попробовал один и тот же код здесь, в 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 \t if (initializeSearch === false)
//After pressing Enter,
// $("#input-form").keypress("pressedKey", function(pressedKey){
// \t if(pressedKey === 13){
// \t \t //Disable textbox to prevent multiple submit
// $("#input-form").attr("disabled", "disabled");
// \t \t console.log("key pressed");
// \t }
// });
//send request to API
//search-input moves up
// function moveItUp() {
// \t $("#input-form").addClass("test"); //.addClass("animated fadeOut stick-disappears").removeClass("stick-appears");
// } \t
//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>
Потому что у вас есть форма, и прессовании введите представляет форму – 2pha