Проблема ajax с Django {{ form|crispy }} vs. {{ form.as_p }}

У меня есть набор зависимых выпадающих элементов, работа которых зависит от функции ajax. Ajax отлично работает с {{ form.as_p }}, но, похоже, он никогда не срабатывает, когда я заменяю {{form.as_p}} на {{form|crispy}}. . Как вы можете видеть в моем html, разница только в том, что закомментировано.

{% extends "base.html" %} {% load tailwind_filters %}

{% block content %}

<div class="max-w-lg mx-auto">
    <a class="hover:text-blue-500" href="{% url 'leads:lead-list' %}" >返回客户名单</a >
    <div class="py-5 border-t border-gray-200">
        <h1 class="text-4xl text-gray-800">{{lead.name}}</h1>
    </div>           
    <form id="leadForm" method="POST" class="mt-5" enctype="multipart/form-data"  data-cities-url="{% url 'leads:ajax_load_cities' %}" novalidate>
    {% csrf_token %}
    {{ form|crispy }}
    {% comment %} {{ form.as_p }} {% endcomment %}
    <div class="flex py-6 ">
        <a href="{% url 'leads:lead-delete' lead.pk %}" 
        class="flex ml text-white bg-indigo-200 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded-md">
                Delete</a> 
        <button type='submit' class=" ml-auto text-white bg-blue-500 hover:bg-blue-600 px-6 py-2 rounded-md">
                Submit
        </button>
    </div>      
    </form>               
</div>    

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_region").change(function () {
        //var dateNow = new Date().getTime() + Math.random();
        var url = $("#leadForm").attr("data-cities-url");
        var regionId = $(this).val(); 
      
        $.ajax({
            url: url,
            data:{
                'region': regionId
            },
            success: function (data){
                $("#id_city").html(data);
            }
            
        });
    });
</script>

{% endblock %}

Вернуться на верх