Javascript ASK: json – JQuery addClass not working on dynamically added item

Monday, December 3, 2012

json – JQuery addClass not working on dynamically added item

I am trying the change the css class when i click on a dynamical added item. I do have the item in doStuffWithThisItem method, but it seems like the changes do not get save back into the dom tree.

But i can\’t get it to work. Can you spot what i am doing wrong?


        <style type=\"text/css\">
        .selectedItem {
            background-color: red;
        }
    </style>
    <script src=\"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">

        jQuery(document).ready(function () {

            function doStuffWithThisItem(item) {
                alert(item.id);
                jQuery(item.id).addClass(\'selectedItem\');
            }

            function parseNodes(nodes, level) {

                var ol = document.createElement(\"ul\");
                for (var i = 0; i < nodes.length; i++) {
                    ol.appendChild(parseChildNode(nodes[i], level));
                }

                return ol;
            }

            function parseChildNode(child, level) {

                var li = document.createElement(\'li\');
                jQuery(li).html(child.title)
                    .attr(\"id\", child.id)
                    .click(function () {

                        if (level == 1) {
                            doStuffWithThisItem(this);
                        }

                    });

                return li;
            }

            window.jsonData = [{
                    \"title\": \"Item 1\",
                    \"id\": \"item1\",
                    \"description\": \"Item 1 description\"
                },
                {
                    \"title\": \"Item 2\",
                    \"id\": \"item2\",
                    \"description\": \"item 2 description\"
                }];

            jQuery(\"#someDiv\").html(parseNodes(jsonData, 1));
        });

    </script>


<div id=\"someDiv\"></div>