.reset导致页面刷新
.reset导致页面刷新
提问于 2014-03-18 03:20:53
<form class="controls" id="Filters">
<fieldset>
<div id="sample-showcase" class="noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
<div id="rangespan-container">
<span id="min-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
<span id="max" class="range-spans"> - </span>
<span id="max-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
</div>
<div class="range-button checkbox">
<input type="checkbox" class="rangecheck"/></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Filter</h3>
<div class="breakfast-filter checkbox">
<input type="checkbox" class="checkbox1" value=".category-breakfast"/>
<label>Breakfast</label></div>
<div class="lunch-filter checkbox">
<input type="checkbox" class="checkbox2" value=".category-lunch"/>
<label>Lunch</label></div>
<div class="dinner-filter checkbox">
<input type="checkbox" class="checkbox3" value=".category-dinner"/>
<label>Dinner</label></div>
<div class="snacks-filter checkbox">
<input type="checkbox" class="checkbox4" value=".category-snacks"/>
<label>Snacks</label></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Sort</h3>
<div class="sort" data-sort="protein:asc">Low to High</div>
<div class="sort" data-sort="protein:desc">High to Low</div>
<div class="sort" data-sort="random">Random</div>
</fieldset>
<button id="Reset">Clear Filters</button>
</form>JS的片段
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(){
self.$filters[0].reset();
self.parseFilters();
});
}self.$reset = jQuery('#Reset');在代码中定义得更高。不知道这是不是足够的信息。
这里是指向完整代码的链接： 单击此处
如果您转到主页，单击某些过滤器，然后尝试重置。你应该看到它的工作方式，就像它应该带你去domain.com/？
不知道为什么
请帮帮忙
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-18 03:27:38
默认情况下，元素是提交按钮。如果要设置“虚拟”按钮，则必须设置type="button"，即它们没有任何默认行为：
type="button"：按钮没有默认行为。它可以有与元素的事件相关联的客户端脚本，这些脚本在事件发生时被触发。
<button type="button" id="Reset">Clear Filters</button>当然，您也可以将其设置为type="reset"，让浏览器负责重置表单元素：
type="reset"：按钮将所有控件重置为它们的初始值。
然后，可以将事件处理程序简化为：
self.$reset.on('click', function(){
self.parseFilters();
});这不是一个巨大的变化，但如果浏览器已经提供了这个功能，为什么不利用它呢？
Stack Overflow用户
发布于 2014-03-18 03:27:30
因为您使用的是窗体中的按钮，并且没有阻止它的默认行为。因此，在重置表单后，该表单将被提交。
要么在函数之后返回false，要么返回preventDefault()。尝尝这个。
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});或者，您需要为按钮标签设置type=“按钮”，以确保它们是类型按钮，而不是提交。
<button id="Reset" type="button">Clear Filters</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22469736
复制相关文章
相似问题
腾讯云开发者
