我正在使用 on("submit", function(){})
提交表单。我正在使用一个使用类名的 jquery 选择器。
function itinerarioSearh(){
$("form.itinerario-searchForm").on("submit",function(e) {
e.preventDefault();
console.log(this.id);
});
}
现在,问题是我正在动态生成表单,因为我有多个具有相同类名的表单,所以该函数会运行多次。
这是我生成的 html。
<div class="row input_fields_wrap">
<div class="row top-buffer-1">
<form id="itinerario-searchForm-1" class="itinerario-searchForm">
<label for="itinerio-localita" class="label-required">Località o città in cui vuoi andare</label>
<input type="text" class="form-control input-sm required dest-autocomplete ui-autocomplete-input" id="itinerio-localita" placeholder="" name="itn_countryInput_1" onfocus="replicateItinerarioForm(0);itinerarioAutocomplete(this.id);" autocomplete="off">
</form>
</div>
<div class="row top-buffer-1">
<form id="itinerario-searchForm-2" class="itinerario-searchForm">
<label for="itinerio-localita" class="label-required">Località o città in cui vuoi andare</label>
<input type="text" class="form-control input-sm required dest-autocomplete ui-autocomplete-input" id="itinerio-localita" placeholder="" name="itn_countryInput_1" onfocus="replicateItinerarioForm(1);itinerarioAutocomplete(this.id);" autocomplete="off">
</form>
</div>
<div class="row top-buffer-1">
<form id="itinerario-searchForm-3" class="itinerario-searchForm">
<label for="itinerio-localita" class="label-required">Località o città in cui vuoi andare</label>
<input type="text" class="form-control input-sm required dest-autocomplete ui-autocomplete-input" id="itinerio-localita" placeholder="" name="itn_countryInput_1" onfocus="replicateItinerarioForm(2);itinerarioAutocomplete(this.id);" autocomplete="off">
</form>
</div>
<div class="row top-buffer-1">
<form id="itinerario-searchForm-4" class="itinerario-searchForm">
<label for="itinerio-localita" class="label-required">Località o città in cui vuoi andare</label>
<input type="text" class="form-control input-sm required dest-autocomplete ui-autocomplete-input" id="itinerio-localita" placeholder="" name="itn_countryInput_1" onfocus="replicateItinerarioForm(3);itinerarioAutocomplete(this.id);" autocomplete="off">
</form>
</div>
<div class="row top-buffer-1">
<form id="itinerario-searchForm-5" class="itinerario-searchForm">
<label for="itinerio-localita" class="label-required">Località o città in cui vuoi andare</label>
<input type="text" class="form-control input-sm required dest-autocomplete ui-autocomplete-input" id="itinerio-localita" placeholder="" name="itn_countryInput_1" onfocus="replicateItinerarioForm(4);itinerarioAutocomplete(this.id);" autocomplete="off">
</form>
</div>
这是我点击提交后的控制台输出:
itinerario-searchForm-1
itinerario-searchForm-1
itinerario-searchForm-1
itinerario-searchForm-1
最佳答案
问题源于您在 itinerarioSearh()
函数中绑定(bind)事件处理程序,因此无论何时执行函数,事件处理程序都会附加到所有现有的 $("form.itinerario -searchForm")
由于“直接”绑定(bind)。
您可以使用 .off()
在附加新事件处理程序之前取消绑定(bind)以前附加的事件处理程序。
function itinerarioSearh(){
$("form.itinerario-searchForm").off("submit").on("submit",function(e) {
e.preventDefault();
console.log(this.id);
});
}
或
去掉 itinerarioSearh()
函数并使用 Event Delegation使用 .on()委托(delegate)事件方法,动态生成表单时。
一般语法
$(document).on('event','selector',callback_function)
示例
$(document).on("submit","form.itinerario-searchForm", function(e) {
e.preventDefault();
console.log(this.id);
});
注意:您应该使用最近的静态容器代替文档
。
关于javascript - 使用类名提交表单的 "on"方法多次运行该函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34410054/