javascript - 使用类名提交表单的 "on"方法多次运行该函数

Question

我正在使用 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

Answer 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);
});

注意:您应该使用最近的静态容器代替文档。