$ ('. Class'). Click() не работает

Question

Я сделал функцию jQuery, которая выполняется, когда нажата кнопка, содержащая класс button-trash. Проблема в том, что нет реакции, когда я нажимаю на кнопку, но alert работает в $(document).ready(function().

HTML

<div id="div_flotte"> 
<div class="div_avion" style="display:none;"> 
    <div class="panel panel-default"> 
      <div class="panel-heading"> 
      <div class="form-inline"> 
      <div class="input-group" style="width:200px"> 
       <span class="input-group-addon" id="basic-addon1">F-BEN</span> 
       <input type="text" name="avions[][immat]" class="form-control" placeholder="Ex : 49" > 
      </div> 
      <div class="input-group" style="float:right;"> 
       <button class="btn btn-danger button-trash" type="button" name="button"><i class="fa fa-trash"></i></button> 
      </div> 
      </div> 
      </div> 
     <div class="panel-body"> 
     <div class="form-group"> 
     <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Marque</span> 
       <input type="text" name="avions[][marque]" class="form-control" placeholder="Ex : Airbus" > 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="input-group"> 
      <span class="input-group-addon" id="basic-addon1">Modèle</span> 
      <input type="text" name="avions[][modele]" class="form-control" placeholder="Ex : 737" > 
      </div> 
     </div> 
     <div class="form-group"> 
     <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">IATA</span> 
       <input type="text" name="avions[][iata]" class="form-control" placeholder="Ex : 738" > 
      </div> 
     </div> 
     <div class="form-group"> 
     <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Type de vol</span> 
       <select name="avions[][type]" class="form-control-inline"> 
       <?php 
        foreach ($types_vol_avion as $cle => $value) { 
         echo '<option value="'.$cle.'">'.$value.'</option>'; 
        } 
        ?> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
     <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Transport</span> 
       <select name="avions[][activite]" class="form-control-inline"> 
       <?php 
        foreach ($Activite_avion as $cle => $value) { 
         echo '<option value="'.$cle.'">'.$value.'</option>'; 
        } 
        ?> 
      </select> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
     $('.button-trash').click(function(){ 
      alert("test"); 
     }); 
     alert("test"); 
}); 

EDIT: ДИВ .div_avion создается динамически с помощью этой функции:

function AddAvion() 
{ 
$(".div_avion").eq(0).clone().attr({id:'div_avion'+($(".div_avion").length+1), style:'display:visible;'}).css('display', 'visible').appendTo("#div_flotte"); 
} 

Answer 1

Хорошо. Поскольку вы создаете динамический элемент, вы можете добавить свое событие следующим образом:

$(document).on('click', '.button-trash', function() { 
    alert('hello'); 
}); 

Надеюсь, это поможет.

Answer 2

Если кнопка Динамически производится, то вы должны использовать по методу

<script> 
     $(document).ready(function(){ 

       $('.input-group').on('click','.button-trash', function(){ 
        alert ('it is working'); 
        alert("test"); 
       }); 
       alert("test"); 
     });  

    </script>