Search code examples
javascriptjqueryhtmlcssdom-traversal

modify CSS of elements created via .load()

First time using jQuery. I'm using it to load the content of an external element onto my page. It loads fine, but I'm finding that the normal traversal methods don't work on the loaded elements. For instance, what I have is:

<div id="area"></div>
<script type="text/javascript">
     $("#area").load("externalPage.html #externalElement > *");
     $("#area").find("ul").first().css("display","none");
</script>

The second line of the script appears to do nothing. Does this have something to do with the order in which operations are completed?

I'm loading this into a custom HTML module on the Blackboard LMS, which can sometimes behave strangely if scripting gets too complicated, so this could very well be another one of those times. Thank you for helping me figure it out!

Solution

  • The call to load() is asynchronous. This means that your find() is being run before the request completes and the elements are created in the DOM.

    To workaround this you can put your logic in the callback parameter of load(). This means that it will not be called until the request completes and the DOM is in the state you expect. Try this:

    $("#area").load("externalPage.html #externalElement > *", function() {
    $("#area").find("ul").first().css("display","none");
});