Question

HTML

 <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');它在代码中定义得更高。不确定这是否足够的信息。

以下是完整代码的链接： Click Here

如果您转到主页，请单击某些过滤器，然后尝试重置。您应该看到它的工作方式，然后将您带到domain.com /？

不确定原因

请帮助

Answer 1

默认情况下，

button elements是提交按钮。你必须设置type="button"，如果你要制作它们，那就是虚拟＆＃34;按钮，即他们没有任何默认行为：

type="button"：该按钮没有默认行为。它可以具有与元素事件相关联的客户端脚本，这些事件在事件发生时触发。

<button type="button" id="Reset">Clear Filters</button>

当然您也可以将其设置为type="reset"并让浏览器负责为您重置表单元素：

type="reset"：该按钮会将所有控件重置为初始值。

然后，您可以将事件处理程序简化为：

self.$reset.on('click', function(){
  self.parseFilters();
});

这不是一个巨大的变化，但如果浏览器已经提供此功能，为什么不使用它呢？

Answer 2

因为您在表单中使用了按钮而未阻止其默认行为。因此，在重置表单后，表单将被提交。

您必须在函数或preventDefault（）之后返回false。试试这个。

self.$reset.on('click', function(e){
  e.preventDefault();
  self.$filters[0].reset();
  self.parseFilters();
});

或者您需要设置type =＆＃34;按钮＆＃34;对于按钮标记，以确保它们是按钮类型而不是提交。

<button id="Reset" type="button">Clear Filters</button>

Javascript：.reset导致页面刷新

2 个答案: