Home/ Questions/Q 7724013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T04:35:16+00:00

I have a PHP file that serves up a JSON array populated from a

  • 0

I have a PHP file that serves up a JSON array populated from a MySQL database and is loaded into the DOM. This data is loaded via jQuery getJSON() method into the #navContent divide of the HTML document. This functions as planed.

At the very-bottom of the HTML doc, I have a click function that targets the #navItem div that was dynamically loaded into the DOM but this does not fire. I am assuming the <li ID = 'navItem'... isnt kept when the data is dynamically populated..??

What do I have wrong? For now, I just want all the divides that were dynamically created into the #navContent div to click thru to a URL.

<html>
. . .
<head>
. . .
<script type="text/javascript">

    var ajaxLoader = '';
    var container = "navItem";
    var appendE = "navContent";
    var dns = 'http://192.168.1.34';
    var navContent = '/andaero/php/regulatory_list.php';
    var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';

    <!-- ================ When Ready Do This ============================ -->
    <!-- **************************************************************** --> 
    $(document).ready(function(){
          loadNav(dns + navContent, container, appendE);//<- This gets loaded into the navContent<div
          loadPage(dns + bodyContent, "bodyContent");

     });
   . . .
</script>
<body>
    . . .
<div id="navScrollContainer" class="navContentPosition">
                <div id="navContent" >
                    <li id="navItem" style="display: none;">
                        <h1 class="navH1"></h1>
                        <h2 class="navH2"></h2>
                        <p class="navP"></p>
                        <hr class="navHR" />
                    </li>
                </div>
            </div>
. . .
</body>

<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->

<script type="text/javascript">

    /* --------------- Handle Pg Loading ----------------- */
    function loadPage(url, pageName) {
        $("#" + pageName).load(url, function(response){
    //          transition("#" + pageName, "fade", false);
        });
    };

    function loadNav(url, container, appendE) {
        $.getJSON(url, function(data){

            $.each(data.items, function(){

                var newItem = $('#' + container).clone();

                // Now fill in the fields with the data
                newItem.find("h1").text(this.label);
                newItem.find("h2").text(this.title);
                newItem.find("p").text(this.description);

                // And add the new list item to the page
                newItem.children().appendTo('#' + appendE)
            });

            $('#navHeaderTitle').text(data.key);
            //transition("#" + pageName, "show");
        });

        $('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
            e.preventDefault();
            $('#bodyContent').load('www.google.com');
        });
    };
</scrip>
</html>

============ EDIT ================

I tried everything that was sugested with no prevail. I ended up using the code Shyju answered with but one modification to get it to work: As per the docs,

.on( events [, selector] [, data], handler(eventObject) ), I changed [,data] from the tag ID to just the tag type. ie: a. This function now since I wrapped the whole

  • with the tag. See bellow:

    • Changed HTML to:

    <div id="navScrollContainer" class="navContentPosition">
    <div id="navContent" >
        <li id="navItem" style="display: none;">
            <a> //<-- ADDED THIS TAG WRAPPER!!
            <h1 class="navH1"></h1>
            <h2 class="navH2"></h2>
            <p class="navP"></p>
            <hr class="navHR" />
            </a>
        </li>
    </div>
</div

    Changed the Function to (Note that .on() allows a click event on any TAG element–even new ones–since the event is handled by the ever-present previous element after it bubbles to there.:

    $('#navContent').on('click', 'a', function(e){//<--CHANGED DATA TO 'a'
    e.preventDefault();
    $('#bodyContent').load('http://www.google.com');   
});
    Share

    Leave an answer

    You must login to add an answer.

    Need An Account,

    1 Answer

    1. Editorial Team

      for dynamic content, you should use jquery on.

      http://api.jquery.com/on/

      So your code should look like this

      $("#navScrollContainer").on("click","#navItem").click(function(e){
            e.preventDefault();
            $('#bodyContent').load('www.google.com');
});

      But i guess you should not use the id selector for click event, because ids will (And should) be unique for an element. So when you load new content, the id will be different i believe. Probably you can use class name which is common for all those elements to be clicked.

      on method is availabe from jQuery 1.7 version only. If you are using a previous version, you should use live as Niyaz mentioned.

      http://api.jquery.com/live/

      • 0