jquery is not working with adding content dynamically by ajax

Question

i am dynamically adding content using ajax after added the content i am trying to change background image using jquery it's not working this is my code.

Ajax code:

 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();
 }

And this is my jquery code :

<div class="img-fluid" src="img.png">
<script>
  $(document).on( "click", ".img-fluid", function(event) {
    var background = $(this).attr("src");
   $(".fullpage_wrapper").css("background","url(" + background + ")");
 });
</script>

please help me to solve this problem.

Hello ,welcome to stack-overflow. do you get any error on console? — Mohammad
– Mohammad, Commented Dec 22, 2019 at 16:12

Mohammad · Accepted Answer · 2019-12-25 12:59:49Z

1

you can use ajaxComplete func, so Whenever an Ajax request completes, jQuery triggers the ajaxComplete event.

For Example :

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

without ajaxcomplete (using background-image instead 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 id="test" class="fullpage_wrapper"></div>
    <div class="img-fluid" data-src="https://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png">

Update : instead of .css() you can use:

document.getElementById("test").style.backgroundImage = "url('background')";

then add id (i used test) name to your class.

edited Dec 25, 2019 at 12:59

answered Dec 22, 2019 at 16:16

Mohammad

1,5751 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Dhruv Raj Over a year ago

i tried your solution but it didn't work for me actually i want to change image on the click of button that on() is working in my code but css() is not working here.

Mohammad Over a year ago

@DhruvRaj i updated my code. if your script doesn't run after Ajax complete maybe Ajax call has a issue. also its better use background-image instead background

Dhruv Raj Over a year ago

i getting this error in console. Cannot read property 'style' of null can you tell me how can i solve this problem.

Mohammad Over a year ago

have you tried my solution? as you can see it's working here

Dhruv Raj Over a year ago

i tried your solution everything is working but only css() is not working i don't know why.

|

Collectives™ on Stack Overflow

jquery is not working with adding content dynamically by ajax

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related