如何在通过Ajax返回的动态内容中绑定jQuery事件？
要将jQuery事件绑定到动态内容中，请使用事件委托。您可以尝试运行以下代码，以了解如何在通过Ajax返回的动态内容中绑定jQuery事件：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".loadingAjax").on("click", function() {
event.preventDefault();
var url = $(this).attr("href"),
appendedContainer = $(".append");
$.ajax({
url: url,
type : 'get',
complete : function( qXHR, textStatus ) {
if (textStatus === 'success') {
var data = qXHR.responseText
appendedContainer.hide();
appendedContainer.append("<a href='#' class='link'>Hi</a>");
appendedContainer.fadeIn();
}
}
});
});
$(document).on("click", '.link', function(event) {
alert("链接已点击！");
});
});
</script>
<style type="text/css">
a.test { font-weight: bold; }
body { font-family: sans-serif;}
</style>
</head>
<body>
<a class="loadingAjax" href="https://www.qries.com"> Click to load Ajax</a>
<div class="append"></div>
</body>
</html>