javascript - event.preventDefault() 仅在第一次有效

Question

我在第二次提交添加频道表单时无法阻止页面重新加载。当用户尝试添加已经存在的频道名称时，会为用户显示错误，并且可以再次提交表单。但是，如果您尝试再次提交表单，页面会重新加载并将表单数据传递给浏览器，例如：http: //127.0.0.1 :5000/?name=z&description=z&submit=Submit#

它不应该重新加载页面，而只是失败并再次显示错误，或者成功添加新频道，但是如果频道添加失败，并且第二次提交表单，它也不会这样做。

我不明白为什么我发送消息的第二种形式的行为符合预期，而不是新的渠道形式。

main.js

document.addEventListener('DOMContentLoaded', () => {

var chatWindow = $('#chat-window');

// Connect to websocket
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

    socket.on('connect', () => {
    //get all channels
    socket.emit('get channels')

    // get last channel
    socket.emit('select channel', {"channel": window.localStorage.getItem('channel')})

    //initialize buttons for New Channel, Submit New Channel, and Send Message
    const newChBtn = document.getElementById('show-new-channel-form')
    newChBtn.onclick = () => {
        document.getElementById('new-channel-form-div').style.display = 'block'
    }
    const newChForm = document.getElementById('new-channel-form')
    newChForm.addEventListener('submit', event => {
        event.preventDefault();
        const name = newChForm.elements['name'].value
        const description = newChForm.elements['description'].value
        name && socket.emit('add channel', {'name': name, 'description': description});
        newChForm.reset()
    })
    const sendMsgForm = document.getElementById('send-message-form')
    sendMsgForm.addEventListener('submit', event => {
        event.preventDefault();
        const message = sendMsgForm.elements['message'].value
        message && socket.emit('send message', {'message': message});
        sendMsgForm.reset()
    })

})

...处理新频道添加结果：

socket.on('channel add failed', data => {
    const error = `<div class="alert alert-dark alert-dismissible fade show" role="alert">
      <strong>${data.error}</strong>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>`
    document.getElementById('new-channel-form').reset()
    document.getElementById('new-channel-form-div').innerHTML += error
})

socket.on('channel added', data => {
    document.getElementById('new-channel-form').reset()
    document.getElementById('new-channel-form-div').style.display = 'none'
    const newChannel = document.createElement('a')
    newChannel.className = 'dropdown-item dropdown-channel'
    newChannel.innerHTML = data.name
    newChannel.value = data.name
    newChannel.onclick = () => {
            socket.emit('select channel', {'channel': data.name})
        }
    console.log(newChannel)
    document.getElementById('channel-select-options').append(newChannel)
    socket.emit('select channel', {'channel': data.name})
})

index.html 中的表单

<div class="col" style="display: none;" id="new-channel-form-div">
                <form role="form" id="new-channel-form">
                    <div class="form-group">
                        <input type="text" class="form-control" name="name" placeholder="Channel name">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="description" placeholder="Channel description">
                    </div>

                    <input type="submit" value="Submit" name="submit" id="channel-submit" class="btn btn-info pull-right" />

...

    <div class="col-12" id="text-input-area">
        <fieldset>                      

            <form name="send-message" id="send-message-form" role="form">
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea name="message" id="message" class="form-control" input rows="2" placeholder="Enter message"></textarea>
                </div>

                <div class="actions">
                    <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message." />
                </div>  
            </form>     
       </fieldset>  
    </div>

标签： javascriptjqueryformspreventdefaultflask-socketio