CODEWITHSUNDEEP
jquerydomshow-hidedynamically-generated
Moenie
Moenie

Reputation: 113

Jquery changes on element which is added dynamically is not working

Adding HTML dynamically to a container element. the dynamically added HTMl has a element which have an onclick attribuut. the onclick function of this element will be used to show a div element which is also added dynamically.

the last point is not working if i click on the element the function will be call. but the element isn't shown. its looks like that the browser don't redraw the changes.

Do somebody know what i am doing wrong??

sorry for my bad english if something is not clear please ask me.

see the sample code here

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

Upvotes: 1

Views: 282

Answers (1)

hahaha
hahaha

Reputation: 1037

EDIT: I think I found the problem. $("#subContentC").show(); points to the first <div id="subContent".. element and does .show() to that element instead of the dynamically created one.

Possible fixes.

1) working fiddle here Basically instead of selecting the element with id (which will only select one) select it with class (so it runs .show() on all elements with the specific class)

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

2) working fiddle here After creating the container (content and subcontent) delete the subjectContent div so id-naming wont clash any more

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

Upvotes: 1

Related Questions