2017-07-24 152 views
-1

我被困在这一点上。 我正在做一个jQuery的动态表单,我想添加一个删除按钮,当我点击一个Add new tasks时动态创建。jQuery - 添加行为,当点击其他按钮时动态创建的按钮

所以有我的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()) 
}) 

注:它与“添加新作品任务”按钮,但 “删除”

+2

使用事件代表团:$(文件)。在( '点击', '.btn-危险',函数(){ 的console.log($(本).parent()) } ); – hallleron

+1

@hallleron快速有效,谢谢!我花了这么一个小时。 – UnsignedFoo

+0

检查这一个 https://stackoverflow.com/questions/35808058/onclick-is-not-working/35808785#35808785 –

回答

2

试试这个

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

工作!谢谢! – UnsignedFoo

1

$(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") 
 
}) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="bttn-add">add</div>