Question

当我点击动态添加项目时，我正在尝试更改css类。我确实在doStuffWithThisItem方法中有项目，但似乎更改没有保存回到dom树中。但我无法让它发挥作用。你能发现我做错了吗？

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

Answer 1

请更改：

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

要：

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

选择器中有错误

Answer 2

您已经在doStuffWithThisItem中使用了html元素，因此您无需使用id来获取该元素，但是您没有正确使用它。

试试这个：

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

Answer 3

你试过.on和.live处理程序：

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

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

                });

或

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

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

                });

Answer 4

我认为它与动态添加的项目有关。我之前遇到过这种情况，并且必须使用.on()方法将事件附加到动态添加的项目中。

此外，我认为您的选择应该只是项，而不是item.id。

Answer 5

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

原来是

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

缺少 #ID 选择器..

<强> Check Fiddle

JQuery addClass无法动态添加项目

5 个答案: