jquery动态生成的元素绑定事件无效

场景：点击添加按钮动态添加dl自定义列表，dl自定义列表里面的dd里面有个a标签，点击后删除这个dl。

问题：通过动态添加的a标签添加的点击事件无效

以下是问题代码：

$(".add").click(function () {
var dl = $("<dl></dl>");
var dt = $(`<dt><img src=${arr[mathNum].pic}></dt>`);
var dd1 = $(`<dd>${arr[mathNum].title}</dd>`);
var dd2 = $("<dd><a class='del' href='javascript:void(0);'>删除</a></dd>");
dl.append(dt, dd1, dd2);
$(".clear").before(dl);
});
$('.del').click(function () {
$("this").parent().parent().remove();
});

解决办法：

1、通过事件委托来处理

$(".add").click(function () {
var dl = $("<dl></dl>");
var dt = $(`<dt><img src=${arr[mathNum].pic}></dt>`);
var dd1 = $(`<dd>${arr[mathNum].title}</dd>`);
var dd2 = $("<dd><a class='del' href='javascript:void(0);'>删除</a></dd>");
dl.append(dt, dd1, dd2);
$(".clear").before(dl);
});

//这里使用on,因为on支持给动态生成的元素绑定事件
//需要注意的是,on前面的元素必须是静态的
$(document).on("click",".del",function (params) {
$(this).parent().parent().remove();
 })

2、给动态元素添加事件监听

$(".add").click(function () {
var dl = $("<dl></dl>");
var dt = $(`<dt><img src=${arr[mathNum].pic}></dt>`);
var dd1 = $(`<dd>${arr[mathNum].title}</dd>`);
var dd2 = $("<dd><a class='del' href='javascript:void(0);'>删除</a></dd>");
dl.append(dt, dd1, dd2);
$(".clear").before(dl);
clickListener();
});
//绑定事件,unbind()指如果没有绑定则绑定，避免重复绑定
function clickListener() {
	$(".del").unbind().click(function () {
		$(this).parent().parent().remove();
			});
		}