如何获取jquery来选择使用client.open加载的html中的类

Question

In my html document I have this code

var client = new XMLHttpRequest();
client.open('GET', '(URL)example.txt');
client.onreadystatechange = function() {
       var theblog = client.responseText;
       $("#bloglocation").html(theblog);
}
client.send();
});

In that loaded html I have

    <p class="example">example</p>

Later on in the file I use jquery to change to color of all the elements in the class example.

    $('.example).css({"background-color" : "yellow"});

The jquery works for all the elements with that class that are not in the loaded html. How can I get it to work for the class in the loaded html.

Answer 1

You are using jQuery, so use jQuery:

$.get('example.txt').done(function(data) {
    $("#bloglocation").html(data);
});

But you need to set the background color after the data has loaded:

$.get('example.txt').done(function(data) {
    $("#bloglocation").html(data);
    $("#bloglocation .example").css({"background-color" : "yellow"});
});

Answer 2

An XMLHttpRequest is an asynchronous operation, meaning the rest of your code is running while that AJAX request is made.

You could repeat your code in the onreadystatechange

client.onreadystatechange = function() {
   var theblog = client.responseText;
   $("#bloglocation").html(theblog);
   $('.example').css({"background-color" : "yellow"});
}

that way the CSS is updated after the AJAX request finishes.