JQuery表单submit事件多次触发：需阻止提交且仅执行一次

问题原因 #

你每次调用loadJobSights函数时，都会给document绑定一次针对#edditSight的submit事件监听。多次调用该函数后，页面上会存在多个相同的事件监听，表单提交时这些监听会依次执行，导致控制台多次输出日志。

解决方案 #

方案1：使用one()替代on()绑定事件 #

one()方法会在事件触发一次后自动解绑，确保每个委托的submit事件只执行一次。修改事件绑定代码如下：

var run = 0
function loadJobSights(loadedJobSight){

    var jobSight = loadedJobSight.split(",");
    L.marker([parseFloat(jobSight[0]),parseFloat(jobSight[1])])
    .bindPopup('<B>NOT WORKING DO NOT SUBMIT</B><form id="edditSight" action="saveData.php" method="POST"><input type="submit"></form>')
    .addTo(map);
    // 用one()替代on()，触发一次后自动解绑
    $(document).one("submit",'#edditSight', function() {
        try{
            run++
            console.log('working', run);
            return false;
        }catch(error){
            console.error(error);
            return false;
        }
                  
    });
}

方案2：绑定前先解绑原有事件 #

如果需要保留on()的灵活性，可以在绑定新事件前，先移除之前针对该选择器的submit事件监听，避免重复绑定：

var run = 0
function loadJobSights(loadedJobSight){

    var jobSight = loadedJobSight.split(",");
    L.marker([parseFloat(jobSight[0]),parseFloat(jobSight[1])])
    .bindPopup('<B>NOT WORKING DO NOT SUBMIT</B><form id="edditSight" action="saveData.php" method="POST"><input type="submit"></form>')
    .addTo(map);
    // 先解绑所有针对#edditSight的submit事件，再绑定新的
    $(document).off("submit", '#edditSight').on("submit",'#edditSight', function() {
        try{
            run++
            console.log('working', run);
            return false;
        }catch(error){
            console.error(error);
            return false;
        }
                  
    });
}

方案3：给表单添加执行标记，阻止重复触发 #

在事件处理函数中，先检查表单是否已经被处理过，若已处理则直接返回，避免重复执行：

var run = 0
function loadJobSights(loadedJobSight){

    var jobSight = loadedJobSight.split(",");
    L.marker([parseFloat(jobSight[0]),parseFloat(jobSight[1])])
    .bindPopup('<B>NOT WORKING DO NOT SUBMIT</B><form id="edditSight" action="saveData.php" method="POST"><input type="submit"></form>')
    .addTo(map);
    $(document).on("submit",'#edditSight', function(e) {
        // 检查是否已经处理过，若已处理则阻止后续执行
        if ($(this).data('submitted')) {
            e.preventDefault();
            return false;
        }
        try{
            run++
            console.log('working', run);
            // 标记为已处理
            $(this).data('submitted', true);
            return false;
        }catch(error){
            console.error(error);
            return false;
        }
                  
    });
}

注意：如果页面上存在多个#edditSight表单（比如多个标记点弹出的表单），建议将表单的id改为动态唯一值（比如用索引或坐标拼接），避免id重复导致的事件绑定冲突。

内容的提问来源于stack exchange，提问作者PhilosophiCat