Why doesn't jQuery recognise the elements on my page?

Question

I'm having trouble with jQuery not recognising elements on my page and throwing an error saying the elements I'm trying to select are null.

We are inserting our content into the following wrapper, which is supplied by the client:

http://www.ft.com/global/mm0802/ag/wrapper

The wrapper contains the following string:

<!-- ftplchol id="contentFixed" version="1.0" -->

which we replace with our content and then render the page.

This is a sample of our content: (the problem I'm having is described below it)

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $('.ActionControl a').live("click", function () {
            $.get($(this).attr("href"), {}, function (result) {
                // do stuff with result
                });
            }, "html");

            return false;
        });
    });
</script>

<div class="ActionControl">
    <span>Fund Directory</span>

    <span>
        <a href="/funddirectory/DirectoryResult">A</a>
    </span>

    <span>
        <a href="/funddirectory/DirectoryResult/B">B</a>
    </span>

    <span>
        <a href="/funddirectory/DirectoryResult/C">C</a>
    </span>    
</div>

When I run my stuff outside the context of the wrapper, everything is fine. My code behaves as expected. But when I run the full page with our content inserted into the wrapper, the following line throws an error:

$('.ActionControl a').live("click", function () {

saying that $('.ActionControl a') is null. Specifically: Microsoft JScript runtime error: 'null' is null or not an object

It doesn't make any sense though. $('.ActionControl a') couldn't and shouldn't be null because by the time the document is ready, <div class="ActionControl"> definitely exists on the page and it works when I don't use the wrapper. I can see it with FireBug & the IE Dev toolbar.

Even if I try to get something like $('a') or $('div') (of which there are many on the page), it still throws the same error. I know jQuery is working though because the $(document).ready() function works..

Does anyone have any idea why this wouldn't be working? Is there something in the wrapper that would prevent it from seeing my control, or any other controls?

Answer 1

Is the jQuery library loaded on the page?

Answer 2

When a jQuery selector matches no elements, it returns an empty array, not null. That implies that jQuery is not loaded. Your path "/Scripts/jquery-1.4.1.js" is probably not valid in the context of their "wrapper" page. Maybe use the google-hosted version of jQuery instead, which would work in all contexts:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

UPDATED: It just occurred to me that you might be getting a conflict with jQuery and another javascript library that uses the '$' symbol. Try using jQuery's "noConflict" mode ( http://api.jquery.com/jQuery.noConflict/ ) and see if it works in that context:

$.noConflict();
jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
});

Answer 3

I have seen this issue when people reload pages and they "replace" the javascript that was originally called. The reference to the original lambda function gets lost since it is rewritten.

I would be curious if the function you have is rewriting the block containing the live function.

Could you at least give us some idea of what the lambda function is doing?

Answer 4

Looks like an older version of jQuery is being included by the from and overriding your version of jQuery. .live isn't available in that version, which is probably causing the error.