1

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>

Moenie
  • 113
  • 2
  • 9
  • possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) – hahaha Aug 04 '14 at 08:48

1 Answers1

1

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();

hahaha
  • 1,001
  • 1
  • 16
  • 32
  • hi thanx for Reply, but this is not the solution because function what i have declared is been calling (showSubContent) so the event is working. only thing is if i change attribute by calling .show() the element is changing but i don't see it on the screen. – Moenie Aug 04 '14 at 09:44
  • could you make a fiddle so I can play with your code? – hahaha Aug 04 '14 at 09:46
  • glad I was able to help :D – hahaha Aug 05 '14 at 06:25