Question

动态地将HTML添加到容器元素。动态添加的HTM1具有一个具有onclick属性的元素。此元素的onclick函数将用于显示div元素，该元素也是动态添加的。

如果我单击该函数将被调用的元素，则最后一点无效。但是元素没有显示出来。看起来浏览器不会重新绘制更改。

有人知道我做错了吗？

对不起我的英语不好，如果不清楚，请问我。

请参阅此处的示例代码

<body>
    <div>
        <span onclick="showSubjectContentInContainer('subjectContent')">Subject description</span>

        <div id="subjectContent" style="display: none;">
                <div >
                    <div>
                        [CONTENT]
                    </div>
                    <div class="showSubContent" onclick="showSubContent('subContent')">Click here to show Sub Content</div>
                    <div id="subContent" style="display: none;">
                        [SUB-CONTENT]
                    </div>
                </div>
        </div>
    </div>
    <div id="container"></div>

    <script type="text/javascript">
        function showSubjectContentInContainer(subjectContentId)
        {
            //get inner html of the subjectContent and place it in the Container div
            var htmlSubjectContent = $("#" + subjectContentId).html();
            $('#container').html(htmlSubjectContent); //THIS WORK FINE
        }

        function showSubContent(subContentId)
        {
            //show the subContent which is added dynamically
            $("#"+subContentId).show(); //THIS NOT WORKING...!!
        }
    </script>
</body>

Answer 1

修改我想我发现了这个问题。 $("#subContentC").show();指向第一个<div id="subContent"..元素，并对该元素执行.show（）而不是动态创建的元素。

可能的修复。

1）working fiddle here基本上不是选择带有id的元素（只选择一个）而是用class选择它（所以它在具有特定类的所有元素上运行.show（））

$("."+subContentId).show();

2）working fiddle here创建容器（内容和子内容）后，删除subjectContent div，这样id-naming就不会再发生冲突

$( "#subjectContent" ).remove();

对动态添加的元素的Jquery更改无效

1 个答案: