如何绑定通过 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>
广告