使用jQuery的load方法局部刷新后，重新加载的button或a标签点击事件不能阻止 的问题

今天在做博客项目的时候，想在博客详情页面，实现点击喜欢的a标签，局部刷新请求，更新数据并回显。

喜欢对应的html代码如下：

<div id="ajax_blog_like_div">
	<div th:fragment="ajax_blog_like" class="cus-flex-start">
		<a th:href="@{/updateBlogLike?blogId=}+${blog.id}" id="like_a" class="cus-flex-cross-center">
			<svg class="bi" width="18" height="18" fill="currentColor" style="margin-right: 5px;">
					<use th:styleappend="${#strings.equals(likeResult,'true')}?'color:#e58057':'color:#337ab7'" xlink:href="../static/fonts/bootstrap-icons.svg#heart"/>
			</svg>
		</a>
		<span th:text="${blog.like}" class="">53</span>
	</div>
</div>

js方法实现如下：

//阻止a标签提交，并使用ajax请求
$("#like_a").click(function (e) {
	e.preventDefault();
	loadLike();
});

//ajax更新博客喜欢信息
function loadLike(){
	var tempVal = $("[name='blogId']").val();
	var random = Math.round(Math.random()*10000);

	$("#ajax_blog_like_div").load("/updateBlogLike?random="+random,{
		blogId : tempVal
	});
}

我希望的效果是每点击一次喜欢图标，便进行一次ajax请求。但实际的情况是，第二次点击时，$("#like_a").click();方法并没有被执行，而是直接按照a标签的herf进行跳转。

尝试了很久，突然想到，每次点击a标签后，也一并局部刷新了a标签，虽然a标签的id没变，但jQuery无法再根据它的id获取到对象了。由此设想，是不是可以在执行异步刷新后再次为a标签设定点击事件呢？

而jQuery的load方法第一个参数是请求地址，第二个参数是传递参数（可选），第三个参数是回调函数（可选），我们可以将加载后需要执行的js代码放到回调函数中，改变后的load方法如下：

$("#ajax_blog_like_div").load("/updateBlogLike?random="+random,{
	blogId : tempVal
},function () {
	//阻止a标签提交，并使用ajax请求
	$("#like_a").click(function (e) {
		e.preventDefault();
		loadLike();
	});
});

由此终于可以解决第二次请求时点击事件没有生效的问题。

ps：

而局部刷新中的button的点击事件的处理和form表单自定义提交时的处理也是一样的道理。