Django-$（document）.ready（function（）{}不会触发，但会加载JQuery

Question

my template:

{% extends "base.html" %}
{% block content %}
{% load static %}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js">
$(document).ready(function() {
    alert("I am an alert box!");
});
$(function() {
    $( ".datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
    });
});
</script>
<form action="{% url 'transaction_create' %}" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" name="save" value="Save transaction">
</form>

{% endblock %}

The google chrome inspector shows that JQuery loads, but no alert box appears nor does the datepicker work (the class on the field is set correctly). Why does the Javascript not work?

Answer 1

You need another opening <script> tag because the one you have in your code is solely dedicated to loading jQuery. MDN states that:

If a script element has a src attribute specified, it should not have a script embedded inside its tags.