CODEWITHSUNDEEP
javascriptjqueryhtmlcss
soum
soum

Reputation: 1159

click items created by dynamic list and show dynamic content

I have a situation where I am generating a dynamic list. Now I am trying to click each item from the list and show some content for each. I understand I could use another array where I can store the content as divs and then point the location to show. Just cant figure out how to write it. here is what i have so far

<ul id="list">
<!--- List items will be added dynamically. --->
</ul>

$(InitPage);

    function InitPage() {

        var jList = $("#list");

        var arrValues = ['<div id="one"></div>', '<div id="two"></div>', '<div id="three"></div>'];

        $.each(
        arrValues,

        function (intIndex, objValue) {

            jList.append(
            $('<li class="thumbItem">' + objValue + "</li>"));
        });
    }

css--
li.thumbItem{
        float:left;
        width:192px;
        height:192px;
        background:gray;
        margin:10px 10px 0 0;
        cursor:pointer;
    }

Upvotes: 0

Views: 263

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Why not use delegation?

$(function(){    
   $('#list').on('click','li',function(){
        //do stuff here
    });
});

For jquery 1.4, use .live():

$('#list li').live('click', function(){
            //do stuff here
        });

Upvotes: 3

Related Questions