jquery无法使用ajax处理动态添加的内容

Question

我是[[动态地使用ajax添加内容，在添加内容后我试图使用jquery更改背景图像，这不起作用，这是我的代码。

Ajax代码：

 function loadlogin(url, loginFunction)
 {
   var xhttp;
   xhttp=new XMLHttpRequest();
   xhttp.onreadystatechange = function()
    {
       if (this.readyState == 4 && this.status == 200) 
       {
         loginFunction(this);
       }
    };
  xhttp.open("GET", url, true);
  xhttp.send();
 }

这是我的jquery代码：
<script>
  $(document).on( "click", ".img-fluid", function(event) {
    var background = $(this).attr("src");
   $(".fullpage_wrapper").css("background","url(" + background + ")");
 });
</script>

请帮助我解决这个问题。

Answer 1

您可以使用ajaxComplete func，因此只要Ajax请求完成，jQuery就会触发ajaxComplete事件。

例如：

<div class="log"></div>
<script>
    $(document).ajaxComplete(function() {
      $( ".log" ).text( "Triggered ajaxComplete handler." );
     //your code here
    });
</script>

没有ajaxcomplete（使用background-image代替background）： 
        $(document).ready(function() {
        var background=$(".img-fluid").attr("data-src")
        $(".fullpage_wrapper").css("background-image","url("+background+")");
       
        });
   
.fullpage_wrapper
{
width:300px;
display:block;
height:60px;
background-color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fullpage_wrapper"></div>
    <div class="img-fluid" data-src="https://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png">