jQuery is not finding elements loaded with AJAX

StackOverflow https://stackoverflow.com/questions/9750236

Question

I have a page like this:

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqtouch.js"></script>
    <script language="javascript" type="text/javascript" src="myfunctions.js"></script>

    [...]

</head>

<body>
    [...]
    <div id="jqt">
    <div id="home" class="current">
        <div class="toolbar">
            TITLE
        </div>
        <div class="s-scrollwrapper">
            <div class="content">
                <div class="container" >
                    <a href="/thepage.php">LOAD ME 1</a><a href="/thepage.php">LOAD ME 2</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    [...]
</body>

The contents of the loaded page is like this, for example:

<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
    <div class="content">
        <div class="container" >
            <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
        </div>
    </div>
</div>
</div>

showItem is a function located in myfunctions.js and the contents is, for example this:

function showItem() {jQuery(jQT.hist[0].hash + ' #myItemId').show();}

so when i click on the button, after the page is loaded, jQT.hist[0].hash value is #AG3456AFGG2347634. This works fine the first time that i load a page with AJAX (well, when jQTouch does it). But if i load another page with same content (but the main identifier is different) it doesn't work. After two AJAX calls, the page dom is simmilar to this:

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqtouch.js"></script>
    <script language="javascript" type="text/javascript" src="myfunctions.js"></script>

    [...]

</head>

<body>
    [...]
    <div id="jqt">
        <div id="home">
            <div class="toolbar">
                TITLE
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <a href="/thepage.php">LOAD ME 1</a><a href="/thepage.php">LOAD ME 2</a>
                    </div>
                </div>
            </div>
        </div>

        <div id="AG3456AF002347634">
            <div class="toolbar">
                TITLE 1
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
                    </div>
                </div>
            </div>
        </div>

        <div id="FC00A83473BE33457" class="current">
            <div class="toolbar">
                TITLE 2
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
                    </div>
                </div>
            </div>
        </div>

    </div>
    [...]
</body>

so when i click the button on the second loaded page it doesn't works cause jQuery is not finding the item. the value of jQT.hist[0].hash is correct, that is #FC00A83473BE33457. The item id #myItemId is the same on both pages, that's the reason to use the wrapper div id that it's unique, to locate each loaded item.

Why this is working on the first page but it's not when i load additional pages into the DOM??

Was it helpful?

Solution

You have to use the "live" command in jQuery for dynamic loaded content.. Pass a class to your button (like .myButton) and to your div container (.container) and use :

$('.myButton').live('click', function(){
    //and scope from $(this) here
    $(this).parents().find('.container:first').attr('id');
});

OTHER TIPS

I suggest using the jQuery .on() method instead of live, it's a newer method (live has some problems), read about it: http://api.jquery.com/on/

As for passing parameters you can add an attribute to the element clicked or call your function from inside the .on() callback with the parameter, Or even do a little (ugly) hack and use .on for the 'load' (or 'ready') events instead of 'click' and add the onclick (if there is really no other way). Something like:

$(".myButton").on("load", function(event){
  $(this).attr('onclick' , yourFunction)
});

But you probably can make it work in a cleaner way with just .on().

Ids are singular, you can not have more than one id with the same value on the page.

Change the ids to classes and reference it that way.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top