функция, которую я установил для своей кнопки HTML, не работает

Question

Я установил функцию для своей кнопки, но кнопка не следует за ней, и она нигде больше не используется

    <div id="main2" class="main">
        <form>
            <label class="Courier" for="EventName"></label><br/>
            <input class="Courier" required type="text" id="EventName" placeholder="Event name"><br/>
            <input class="Courier" required type="Text" id="location" placeholder="venue"><br/>
            <input class="Courier" required type="Text" id="DateAndTime" placeholder="Date and time"><br/>
            <input class="Courier" required type="Text" id="Duration" placeholder="Duration"><br/>
            <input class="courier" required type="Text" id="Clothing" placeholder="Dress code"><br/>
            <input class="courier" required type="Text" id="Food" placeholder="Food"><br/>
            <textarea class="courier" id="Notes" name="Notes" rows="4" cols="50">Enter additional notes here</textarea><br/> 
            <button id="submitEvent">Submit</button>
        </form>
        <br/>
        <div id="newEvent"></div>
    </div>

Javascript для кнопки ниже

$('#submitEvent').on('click' , function submitEvent(){
    var event = $('#EventName');
    var location = $('#location');
    var DateAndTime = $('#DateAndTime');
    var Duration = $('#Duration');
    var Clothing = $('#Clothing');
    var Food = $('#Food');
    var Notes = $('#Notes');

    var data ={
        event: event,
        location:location,
        DateAndTime: DateAndTime,
        Duration: Duration,
        Clothing: Clothing,
        Food: Food,
        Notes: Notes
    };
    var eventRef = database.ref('Events');
    var newEventRef = eventRef.push(data, function(err) {
        if (err) {
            console.error('Error Saving Data', err)
        }
        else{
            console.log('success saving data');
            $('#EventName').val('');
            $('#location').val('');
            $('#DateAndTime').val('');
            $('#Duration').val('');
            $('#Clothing').val('');
            $('#Food').val('');
            $('#Notes').val('');
        }

    })

})

я ожидаю, что он отправит это, по крайней мере, на консоль, чтобы загрузка в firebase была успешной или нет, но это нужно сделать, либо он просто обновит мою страницу до index.html и вместо обычного URL будет http://localhost:63342/Event%20Planner/www/index.html?Notes=1, когда обычно http://localhost:63342/Event%20Planner/www/index.html

Answer 1

Изменить это:

$('#submitEvent').on('click' , function submitEvent(){

к этому:

$(document).on('click', '#submitEvent', function(){

Я предполагаю, что вы используете .on(), потому что кнопка #submitEvent добавляется динамически. Однако вы должны прикрепить событие .on к элементу, который уже существует, когда DOM изначально отображается - $(document) является безопасным и распространенным выбором.

Справка:

Делегирование мероприятия

Answer 2

Я рекомендую вам использовать метод отправки https://api.jquery.com/submit/

<form id="yourFormName">
            <label class="Courier" for="EventName"></label><br/>
            <input class="Courier" required type="text" id="EventName" placeholder="Event name"><br/>
            <input class="Courier" required type="Text" id="location" placeholder="venue"><br/>
            <input class="Courier" required type="Text" id="DateAndTime" placeholder="Date and time"><br/>
            <input class="Courier" required type="Text" id="Duration" placeholder="Duration"><br/>
            <input class="courier" required type="Text" id="Clothing" placeholder="Dress code"><br/>
            <input class="courier" required type="Text" id="Food" placeholder="Food"><br/>
            <textarea class="courier" id="Notes" name="Notes" rows="4" cols="50">Enter additional notes here</textarea><br/> 
            <button type="submit">Submit</button>
</form>

А затем

$( "#yourFormName").submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

Приветствия!