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，而是{{ 3}} 通常 http://localhost:63342/Event%20Planner/www/index.html?Notes=1

Answer 1

更改此：

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

对此：

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

我假设您正在使用.on()，因为#submitEvent按钮是动态添加的。但是，必须将.on事件附加到最初呈现DOM时已经存在的元素上-$(document)是一种安全且常见的选择。

参考：

Event delegation

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

干杯！

我为我的html按钮设置的功能不起作用

2 个答案: