0

出于对它的热爱，我阅读了很多帖子（1、2 ...），但我仍然无法解决这个简单的问题：

我有一个按钮，它使用以下方式打开一个模式htmx：

<button class="btn btn-primary" 
        id="createButton"
        hx-get="/create" 
        hx-target="#modals-here">create
</button>

我的模态看起来像这样并且完美地打开和运行：

<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modalCreate" class="modal fade show" tabindex="-1" style="display:block;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                {% csrf_token %}
                {% crispy form %}
            </div>
        </div>
    </div>
</div>

在我页面的某个地方，我有一个<div id="modals-here"></div>. 在这个模式中，有一些我想验证的输入字段。为此，了解模式何时打开将非常有用。我试过了：

$('#modalCreate').on('shown', function (event) {
//('#modalCreate').on('show.bs.modal', function (event) {
    console.log("hello");
});

这是我base.html的（包括在内）：

{% block javascript %}

    <!-- jQuery -->            
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="..." crossorigin="anonymous"></script>
       
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="..." crossorigin="anonymous"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="..." crossorigin="anonymous"></script>
        
    <!-- htmx -->
    <script src="{% static 'js/htmx.min.js' %}"></script>

    <!-- crispy validator -->
    <script src="{% static 'js/crispy_validator.js' %}"></script>

{% endblock javascript %}

我需要一种可靠的方法来确定我的模态是否/哪个处于活动状态。永远不会出现hello在控制台中。

4

0 回答 0