未捕获的TypeError。未定义的对象不是函数

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