CODEWITHSUNDEEP
jqueryjson
Tony
Tony

Reputation: 1694

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>

Upvotes: 0

Views: 1670

Answers (5)

crashwap
crashwap

Reputation: 3062

I think it has something to do with the item being added dynamically. I've run into that before myself, and had to use the .on() method to attach the events to the dynamically added item.

Also, I think your selector should just be the item, not the item.id.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

jQuery(item.id).addClass('selectedItem');

Supposed to be 

jQuery('#' + item.id).addClass('selectedItem'); //  OR   jQuery(item)

Missing the # ID selector..

Check Fiddle

Upvotes: 0

Tran Minh Dung
Tran Minh Dung

Reputation: 184

Please change :

jQuery(item.id).addClass('selectedItem');

To:

jQuery("#"+item.id).addClass('selectedItem');

You have a mistake in the selector

Upvotes: 2

Jai
Jai

Reputation: 74738

have you tried with .on and .live handlers:

jQuery(li).html(child.title)
                .attr("id", child.id)
                .on('click',function () {

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

                });

or 

jQuery(li).html(child.title)
                .attr("id", child.id)
                .live('click',function () {

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

                });

Upvotes: 0

Jack
Jack

Reputation: 8941

You already have the html element in your doStuffWithThisItem so you don't need to go get it with its id, which you weren't doing properly.

Try this:

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

Upvotes: 1

Related Questions