用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"); 

});