Home/ Questions/Q 7650419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T11:14:53+00:00

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

  • 0

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??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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');
});
    • 0