如何绑定通过 Ajax 返回的动态内容中的 jQuery 事件?


若要绑定动态内容中的 jQuery 事件,请使用事件委托。你可以尝试运行以下代码来了解如何绑定通过 Ajax 返回的动态内容中的 jQuery 事件

在线演示

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/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("Link clicked!");
});
});
</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>

更新于:2020-06-15

695 次访问

开启你的 职业生涯

通过完成课程获取认证

开始
广告