使用"on"方法使用classname提交表单会多次运行该函数

我正在使用on("submit", function(){})提交表格.我正在使用一个使用类名的jquery选择器.

function itinerarioSearh(){
    $("form.itinerario-searchForm").on("submit",function(e) {
        e.preventDefault();
        console.log(this.id);
    });
}

现在,问题是我动态生成表单,因为我有多个具有相同类名的表单,该函数运行多次.

这是我生成的html.

    

        Località o città in cui vuoi andare
        
    


    

        Località o città in cui vuoi andare
        
    


    

        Località o città in cui vuoi andare
        
    


    

        Località o città in cui vuoi andare
        
    


    

        Località o città in cui vuoi andare
        
    

当我点击提交时,这是我的控制台输出:

itinerario-searchForm-1
itinerario-searchForm-1
itinerario-searchForm-1
itinerario-searchForm-1

Satpal.. 5

问题来自于您在itinerarioSearh()函数中绑定事件处理程序,因此每当执行函数时,$("form.itinerario-searchForm")由于"直接"绑定,事件处理程序将附加到所有现有处理程序.

您可以.off()在添加新事件处理程序之前取消绑定以前附加的事件处理程序.

function itinerarioSearh(){
    $("form.itinerario-searchForm").off("submit").on("submit",function(e) {
        e.preventDefault();
        console.log(this.id);
    });
}

要么

在动态生成表单时,使用.on()委托事件方法摆脱itinerarioSearh()功能并使用事件委派.

一般语法

$(document).on('event','selector',callback_function)

例

$(document).on("submit","form.itinerario-searchForm", function(e) {
    e.preventDefault();
    console.log(this.id);
});

注意:代替document你应该使用最接近的静态容器.

问题来自于您在itinerarioSearh()函数中绑定事件处理程序,因此每当执行函数时,$("form.itinerario-searchForm")由于"直接"绑定,事件处理程序将附加到所有现有处理程序.

您可以.off()在添加新事件处理程序之前取消绑定以前附加的事件处理程序.

function itinerarioSearh(){
    $("form.itinerario-searchForm").off("submit").on("submit",function(e) {
        e.preventDefault();
        console.log(this.id);
    });
}

要么

在动态生成表单时,使用.on()委托事件方法摆脱itinerarioSearh()功能并使用事件委派.

一般语法

$(document).on('event','selector',callback_function)

例

$(document).on("submit","form.itinerario-searchForm", function(e) {
    e.preventDefault();
    console.log(this.id);
});

注意:代替document你应该使用最接近的静态容器.