我对jquery很陌生，并且正在尝试创建一个搜索按钮。我想在单击按钮时将一些代码附加到div，但更改应用了一秒钟，然后熄灭(闪烁，好像页面再次加载一样)
我的代码如下：
.HTML：
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Jquery：
jQuery(document).ready(function() {
$("#search").click(function () {
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
控制台日志消息和div 附加都会应用一秒钟，然后立即关闭
实际上，该页面正在重新加载，因为您通过单击表单来提交表单(注意：这很明显，因为当您单击时控制台会清除。控制台输出通常仅在重新加载时清除)。如果您不想提交表单，可以将其替换为常规按钮：
<input type="button" name="search" id="search" value="search" class="tfbutton">
或阻止触发默认事件：
$("#search").click(function (e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
演示：
jQuery(document).ready(function() {
$("#search").click(function(e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>将输入类型从"提交"更改为"按钮。
<input type="button" name="search" id="search" value="search" class="tfbutton">