Click Function for Dynamic Content from JSON Array

Question

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

Sorry this has been a chain of questions related to this dynamic content. Thnx for all your help everyone. — user742030
– user742030, Commented Mar 30, 2012 at 0:55

Shyju · Accepted Answer · 2012-03-30 01:13:55Z

4

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/

edited Mar 30, 2012 at 1:13

answered Mar 30, 2012 at 1:07

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user742030 Over a year ago

Thnx! this didnt work but got me on the correct track. Plz see my edit above.

Niyaz · Accepted Answer · 2012-03-30 01:06:34Z

0

Instead of:

$('#navItem').click(function(){});

try using:

$('#navItem').live('click', function(){}); // jQuery older than 1.7

or

$('#navItem').on('click', function(){}); // jQuery 1.7 or newer

answered Mar 30, 2012 at 1:06

Niyaz

55k56 gold badges154 silver badges183 bronze badges

4 Comments

Greg Pettit Over a year ago

He didn't use it incorrectly, but he used it incorrectly as a replacement for live(). What's there is the replacement for click().

user742030 Over a year ago

@Dylan Cross Thnx! this didnt work but got me on the correct track. Plz see my edit above.

Dylan Cross Over a year ago

@GregPettit Yes, that's what I meant, I was just in a hurry to comment and left that out.

Greg Pettit Over a year ago

@DylanCross Yup, I meant that for Matthew; I was surprised he didn't catch your meaning. ;-)

Ilia Frenkel · Accepted Answer · 2012-03-30 01:13:47Z

0

It would appear so that all your nav elements are created with the same ID. This

$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!

will apply to only one of them I suppose. Try adding some sort of counter to the ID when you are cloning:

var newItem = $('#' + container).clone();
newItem.attr("id","something_unique_in_here");

answered Mar 30, 2012 at 1:13

Ilia Frenkel

1,98714 silver badges20 bronze badges

Collectives™ on Stack Overflow

Click Function for Dynamic Content from JSON Array

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related