Verweise auf ein bestimmtes Formularelement innerhalb eines Moduls

Question

Ich versuche herauszufinden, wie man ein Formular innerhalb eines Moduls referenziert.

Das Modul sieht wie folgt aus:

const UserShows = (function(){ 

    const saveShowToDashboard = function(evt) { 
    evt.preventDefault(); 
    const $saveShowForm = $(this); 
    setTimeout(function() { 
     $saveShowForm.children('.save-show-btn').val('Saved'); 
    }, 500); 
    const showInfo = $(this).children('.save-show-checkbox').val(); 
    const parsedShowInfo = JSON.parse(showInfo); 
    const _csrf = $(this).children('.csrf').val(); 
    const artistName = parsedShowInfo.artist; 
    const data = { 
     showInfo: parsedShowInfo, 
     _csrf: _csrf, 
    }; 
    console.log(data); 
    $.post('/artists/' + artistName, data, function(res) { 
     if (res === '/login') { 
     window.location = res; 
     }else{ 
     console.log(res); 
     } 
    }); 
    }; 

    return { 
    callSaveShowToDashboard: function(evt){ 
     return saveShowToDashboard(evt); 
    } 
    } 

})(); 

// Call saveShowToDashboard on click 
$('.save-show').on('submit', UserShows.callSaveShowToDashboard); 

Das Problem, das ich habe, ist, dass ich nicht herausfinden kann, wie die spezifische save-Show Form zu verweisen, die (es gibt mehr vorgelegt haben werden auf der Seite, die jeweils einem Künstler-Tour-Datum entspricht).

Bevor ich entschied, diese Funktion innerhalb des UserShows-Moduls zu setzen, konnte ich $ (this) verwenden, um auf das spezifische Formular zu verweisen, aber da das Formular nicht mehr der direkte Aufrufer der Funktion ist, tut es dies nicht Arbeit.

Answer 1

Es stellt sich heraus, dass Sie sich mit JQuery auf das Element beziehen können, das ein Ereignis ausgelöst hat, indem Sie event.target verwenden. Also, wenn ich den Code so umschreibe, funktioniert es:

const saveShowToDashboard = function(evt) { 
    evt.preventDefault(); 
    const $saveShowForm = $(event.target); 
    setTimeout(function() { 
     $saveShowForm.children('.save-show-btn').val('Saved'); 
    }, 500); 
    const showInfo = $saveShowForm.children('.save-show-checkbox').val(); 
    const parsedShowInfo = JSON.parse(showInfo); 
    const _csrf = $saveShowForm.children('.csrf').val(); 
    const artistName = parsedShowInfo.artist; 
    const data = { 
     showInfo: parsedShowInfo, 
     _csrf: _csrf, 
    }; 
    console.log(data); 
    $.post('/artists/' + artistName, data, function(res) { 
     if (res === '/login') { 
     window.location = res; 
     }else{ 
     console.log(res); 
     } 
    }); 
    };