Question

我坚持这个。我在jQuery中做了一个动态表单，我想添加一个删除按钮，当我点击Add new tasks时动态创建。

所以有我的JS脚本。第一个是Add new tasks button： -

$("#bttn-add").click(function(){        
        $("#bttn-add-function").before(
            '<div class="toadd panel panel-default panel-body">'+
                '<div class="form-group func">'+
                    '<label>Función a desarrollar <sup style="color:red">*</sup></label>'+
                    '<input class="form-control" type="text" placeholder="Función a desarrollar" maxlength="200" required>'+
                '</div>'+
                '<div class="form-group tarea">'+
                    '<label>Tarea principal en esta función <sup style="color:red">*</sup></label>'+
                    '<textarea class="form-control"  placeholder="Enumere las funciones de su puesto de trabajo comenzando por las más representativas, así como las tareas necesarias para el cumplimiento de las mismas" rows="3" required></textarea>'+
                '</div>'+
                '<div>'+
                    '<button class="button btn-danger" type="button"><span class="fa fa-minus"></span></button>'+
                '</div>'+
            '</div>'
        );
 });

然后，用于向Delete按钮添加行为的代码段不起作用： -

$("button .btn-danger").click(function(){
   console.log($(this).parent())
})

注意：它适用于＆＃34;添加新任务＆＃34;按钮但是＆＃34;删除＆＃34;

Answer 1

试试这个

$(document).on('click',"#bttn-add button .btn-danger",function(){
   console.log($(this).parent())
})

Answer 2

＆＃13;

$(document).ready(function(){
$("#bttn-add").on('click',function(){        
        $("#bttn-add").before(
            '<div class="toadd panel panel-default panel-body">'+
                '<div class="form-group func">'+
                    '<label>Función a desarrollar <sup style="color:red">*</sup></label>'+
                    '<input class="form-control" type="text" placeholder="Función a desarrollar" maxlength="200" required>'+
                '</div>'+
                '<div class="form-group tarea">'+
                    '<label>Tarea principal en esta función <sup style="color:red">*</sup></label>'+
                    '<textarea class="form-control"  placeholder="Enumere las funciones de su puesto de trabajo comenzando por las más representativas, así como las tareas necesarias para el cumplimiento de las mismas" rows="3" required></textarea>'+
                '</div>'+
                '<div>'+
                    '<button class="button btn-danger" type="button"><span class="fa fa-minus"></span>Delete</button>'+
                '</div>'+
            '</div>'
        );
 });
 
 $(document).on('click','.btn-danger',function(){
   console.log("lala")
}) 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bttn-add">add</div>

＆＃13;

jQuery - 在单击其他按钮时动态创建的按钮添加行为

2 个答案: