使用 ajax 和脚本加载 modal 的 html

Question

因此，我正在开发一个应用程序，该应用程序需要我构建一个向导 html 结构并在模态中提供特殊行为。我的应用程序是在 Laravel 中制作的，问题如下：

我需要每次模态打开时通过 ajax 调用加载 HTML 结构，然后将 html 正文附加到 .modal-content div。我这样做没有问题，当我尝试执行 JavaScript 代码时出现问题，它似乎没有响应。

结构如下：

收入/index.blade.php

    @section("modals")
        <div class="modal fade" id="incomesModal" tabindex="-1" role="dialog" aria-labelledby="incomesModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">

                </div>
            </div>
        </div>
    @endsection
@section("modalsScript")

    <script>
        $(function() {

            $('#incomesModal').on('show.bs.modal', function(){

                $.ajax({
                    url: "/incomes/newModal",
                    success: function(data){
                        $('#incomesModal .modal-content').html(data);
                    }

                });

            });

            $(".income-type").on("click", function(){

                alert("clicked");

            });

        });
    </script>
@endsection

收入/modal.blade.php

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="incomesModalLabel">Este ingreso se relaciona mejor con...</h4>

</div>
<div class="modal-body">

    <div id="incomeSelectType">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                <div class="income-type " id="income-type-first" data-type="unit">
                    <h5>Ingreso por Venta de Unidades</h5>

                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="income-type " id="income-type-second" data-type="hour">
                    <h5>Ingreso por Facturación de Horas</h5>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="income-type " id="income-type-third" data-type="recurring">
                    <h5>Ingreso Recurrente/Subscripciones</h5>

                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="income-type " id="income-type-fourth" data-type="other">
                    <h5>Otro tipo de Ingreso</h5>

                </div>
            </div>
        </div>
    </div>


    <div id="income-type-first-box" style="display: none;">
        VU
    </div>
    <div id="income-type-second-box" style="display: none;">
        FH
    </div>
    <div id="income-type-third-box" style="display: none;">

        @include("incomes.recurringCharges.create")

    </div>
    <div id="income-type-fourth-box" style="display: none;">
        OI
    </div>

</div>

<div class="row" id="controles">
    <div class="col-md-3">
        <p align="left" class="mar-l20 delete"  data-dismiss="modal" >
            <span class="glyphicon glyphicon-trash" style="display:block;"></span> Eliminar
        </p>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <p align="right"  class="mar-r20 mar-t20">
                            <span style="display:none;">
                                <span class="glyphicon glyphicon-arrow-left" style="color:orange;"></span> <a id="incomes-back">Regresar</a> |
                            </span>
            <a id="incomes-next">Siguiente</a> <span class="glyphicon glyphicon-arrow-right" style="color:orange;"></span>
        </p>
    </div>
</div>
<div class="modal-footer">
    <div class="row">
        <div class="col-md-6">
            <p align="left">
                Avance para completar este dato:
            </p>
        </div>
        <div class="col-md-6">
            <p align="right">
                100%
            </p>
        </div>
        <div class="col-md-12">
            <div class="progress" id="incomeProgress">
                <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 00%">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</div>

请注意，我已缩短代码以便于理解。 另请注意，此代码在没有 ajax 调用的情况下直接嵌入时有效。

因此，在显示模式后，ajax 代码带来 HTML 并插入 $('#incomesModal .modal-content')，甚至在加载 HTML 结构之前就已经加载了 SCRIPT，但是，当我尝试点击任何 $(".income-type") 框没有任何反应！

有什么想法吗？

谢谢大家！

Answer 1

了解事件委托： 试试：

 $("body").on("click",'.income-type',function(){

                alert("clicked");

});