Javascript $（'；.class'；）。单击（）不'；行不通

我制作了一个jQuery函数，当单击包含类

按钮垃圾桶

的按钮时执行该函数。问题是，当我单击按钮时没有反应，但是

$（文档）.ready（函数（）

工作正常

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>

编辑： div

.div\u 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" );
}

---

好的。由于您正在创建一个动态元素，您可以像这样添加事件：

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

---

希望这有帮助。

如果按钮是动态生成的，那么应该使用on（）方法

$（文档）.ready（函数（）{
$（'.input group'）。在（'click'，'button trash'，函数（）上{
警报（“它正在工作”）；
警报（“测试”）；
});
警报（“测试”）；
});    

您可以创建一个JSFIDLE来模拟您的问题吗？您有一个

显示：无；

设置为

.div\u avion

元素。这可能是原因吗，我不确定。嗯……您的按钮是通过jquery动态创建的吗？您的代码工作正常，顺便说一句……您的代码似乎是正确的。这可能是html/css问题？还有其他元素吗我想在这种情况下，你应该做

$（文档）。在（'click'，'.button trash'，function（）{…}）上；

。我从未意识到在动态创建html时必须使用on方法？我使用.click函数，即使是动态创建的，它仍然有效。嗯。根据我的经验，对于动态创建的元素，我确实必须使用

.on（）

。

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

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

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

    </script>