Question

我正在使用jQuery动态地创建一个标签“a”来删除它，但是jQuery选择器没有使用类按钮。 jsfiddle.net

$(document).ready(function () {                        
               // Agregar campo
    $("#addautor").click(function () {                                                                                                    
        var autor = $("#autor").val();                           
            if (autor.length > 0) {                        
                var data = "<label class='etiqueta' id='hola'>" + autor + "&nbsp;&nbsp;<a class='btn btn-xs btn-danger btn-hover borrar' title='Eliminar'><span class='glyphicon glyphicon-trash'></span></a>&nbsp;&nbsp;</label>";
                       $("#autorlist").append(data);
                   }                                        
    });            
               $(".etiqueta").click(function(){
                   alert("fino");
               });          
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="" class="col-sm-2 control-label dubline">
    Autor(es) <br> <small>Encargado(s)</small>
</label>
    <div class="col-sm-10">
        <div class="input-group">
            
        <input type="text"  class="form-control" autocomplete="off" id="autor" name="autor">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addautor">
    ... <span class="glyphicon glyphicon-floppy-save"></span> Agregar
    </button>                  
</span>
</input>

        </div><!-- /input-group -->                                     
        <p class="help-block" id="autorlist"></p>
      </div><!-- /col-sm-10 -->
</div><!-- /form-group -->

Answer 1

如果问题是点击删除图标时您的警报没有触发，那是因为您需要对动态添加的元素使用事件委派。将您的点击功能更改为：

$('.help-block').on('click', ".etiqueta", function () {
    $(this).closest('label').remove();
});

<强> jsFiddle example

Answer 2

您需要使用事件委派：

           $(".etiqueta").click(function(){
               alert("fino");
           });

应该是：

           $("#autorlist").on("click", ".etiqueta", function(){
               $(this).closest('label').remove();
           });

DEMO

删除jQuery的问题

2 个答案: