javascript - 未捕获的类型错误。 undefined object 不是函数

Question

我正在学习 JS，但我遇到了这个错误:

我不确定这是否是好的做法，但我将纯 javascript 与 jQuery 混合使用。我听说这是不好的做法，但我也听说使用纯 JS 快得多。这就是我来回切换的原因。我使用 jQuery 来使用他们有用的库

html:

<form class="contact-input" id="contact-form" action="" method="post">
    {% csrf_token %}
    <div class="col-md-12">
        <div class="col-md-6">
            <div class="contact-input-margin form-group">
                <input id="firstname" class="form-control" placeholder="First name">
            </div>
            <div class="contact-input-margin form-group">
                <input id="lastname" class="form-control" placeholder="Last name">
            </div>
            <div class="contact-input-margin form-group">
                <input id="email" class="form-control" placeholder="Email">
            </div>
            <div class="contact-input-margin form-group">
                <input id="phonenumber" class="form-control" placeholder="Phone number">
            </div>
        </div>
        <div class="contact-input-margin col-md-6">
            <div class="form-group">
                <textarea id="message" rows="8" class="form-control contact-margin" placeholder="Message...">
                </textarea>
            </div>
        </div>
    </div>
    <input type="submit" value="Submit" class="btn btn-xl">
</form>

js:

// Contact form submit
var contactFrom = document.getElementById("contact-form");
contactFrom.on('submit', function(event) {
    event.preventDefault();
    console.log("form submitted");
    create_post();
});

Answer 1

您正在 contactFrom 上使用 jQuery 方法，它不是 jQuery 对象。

使用$(contactFrom):

var contactFrom = document.getElementById("contact-form");
$(contactFrom).on('submit', function(event) {
    event.preventDefault();
    console.log("form submitted");
    create_post();
});

Example Here