标签的增加、删除与复制,动态标签js不生效的解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="删除" /> <input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; // $('#u1').append(temp); $('#u1').prepend(temp); // $('#u1').after(temp) // $('#u1').before(temp) }); $('#a2').click(function () { var index = $('#t1').val(); //$('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }); $('#a3').click(function () { var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); //$('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }) </script> </body> </html>
使用on事件与body托管解决动态生成标签触发js脚本不生效的问题
$(document).on('click','.edit',function(){
$('.c1 , .c2').removeClass('hide')
});
// $("body").delegate(".edit","click", function(){
// $('.c1 , .c2').removeClass('hide')
// });
$("body").delegate(".del","click", function(){
console.log('1231');
$(this).parent().parent().remove()
});