[jQuery/Html] Dynamisch adden ListItems en click-afhandeling

[Adimeuz]

Heren,

Voor een chatbox-implementatie wil ik voor elke afzender een nieuwe 'tab', in wezelijk een list-item, aanmaken dat zich als een tab gedraagd.
Ik zit enorm vast in een stukje jQuery waarin ik een aantal list-items in een lijst heb waarvan sommige een id hebben. Deze list items zijn clickable en openen na hun click een container met bijbehorende informatie.

Enkele snippets"

HTML:

<div id="tabcontainer">        
    <ul class="tabs">
        <li data-container="messages_container" class="active">Messages</li>  
        <li data-container="xml_log_container">Xml Log</li>  
        <li data-container="events_container">Events</li>  
    </ul>
    
    <span class="clear"></span>
    
    <div class="content" id="messages_container">
        <div id="messages"></div>
    </div>

    <div style="display:none;" class="content" id="xml_log_container">
        <div id="log"></div>
    </div>
    
    <div style="display:none;" class="content" id="events_container">
        <div id="events"></div>
    </div>
</div>

Door op de list-item te klikken wordt de bijbehorende data-container aangeroepen op zijn id, dus als ik op 'messages' klik, wordt de div met id 'messages_container' zichtbaar.
De jQuery hierbij horend doet zijn werk, voor deze tabs althans.

JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
        $('ul.tabs li').on("click", function () {
            var current = $(this);
            var contentBox = $('#' + current.attr('data-container'));
            $('ul.tabs li').removeClass('active');
            current.addClass('active');
            $('.content').hide();
            contentBox.show();
        });
    }); 
</script>

Echter, wanneer ik een bericht ontvang van persoon x, maak ik een nieuw listitem aan:

JavaScript:

matrixHub.client.onMessage = function (msg) {
            if (msg.Body != null)
            {

                if ($("#" + msg.From).length == 0) {
                    $('ul.tabs').append("<li data-container='" + msg.From +"messages_container' id='" + msg.From + "'>" + msg.From + "</li>");
                    $('#tabcontainer').append("<div style='display:none;' class='content' id='" + msg.From + "messages_container'><div id='messages" + msg.From + "'></div></div>");
                }
                
                $("#messages" + msg.From).append(
                        "<span class='from'>" + msg.From + ":</span>" +
                        "<span class='message'>" + msg.Body + ":</span>" +
                        "</br>"
                );
            }
        };

Hierbij wordt dus de listitem en datacontainer aangemaakt. Ook de berichten die eventueel binnen komen worden binnen de juiste container geplaatst. Dit werkt dus wel, echter de klik-afhandeling blijft achterwege. Met andere woorden: in de element-inspector zie ik de data gepusht worden naar de juiste div, maar ik kan er niet op klikken om het ook daadwerkelijk zichtbaar te maken.

Nu heb ik het idee dat dit probleem ontstaat doordat mijn toegevoegde listitems een id meekrijgen waarmee ik kan checken of deze al bestaat of niet, waardoor dit stukje:

JavaScript:

 $('ul.tabs li').on("click", function () {

het list-item niet meer ziet.

Klopt dit? Zo ja, hoe kan ik er dan voor zorgen dat mijn click toch opgevangen wordt?
Overigens, het laatste fragmentje code had ik al gereplaced, dit was voorheen

JavaScript:

$('ul.tabs li').click(function () {

Omdat dit laatste geen dynamisch gegenereerde elementen zou kunnen zien. Ik weet niet of dit waar is, maar de door mij gezochte oplossingenboden geen soelaas. Hopelijk kunnen jullie mij van advies voorzien.
Bij voorbaat dank.

[Bosmonster]

Kijk eens naar event delegation. Gelukkig zit dat tegenwoordig in de on() method geïntegreerd, dus veel makkelijker wordt het niet

http://api.jquery.com/on/

JavaScript:

 $('ul.tabs').on('click', 'li', function () { ...

[Adimeuz]

Dat is wel erg gemakkelijk...
Het werkt inderdaad... Combinatie van te weinig kennis in jQuery en te lang op een probleem blijven hangen zal waarschijnlijk de oorzaak zijn. Dank overigens!