我对 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>关于javascript - jquery按钮点击变化闪烁然后熄灭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48182608/