Question

i have script that append sections(div) to my page

$(document).ready(function () {
        var counter = 1;

        $('#AddSectionButton').click(function () {
            $('div#bottomLeftContent').append(
            '<div  id="section" class="listItem">' +
                '<table class="sectionTable">' +
                    '<tr>' +
                        '<td style="width: 20%; padding:0;">' +
                            '<p>' + counter + ':' + '</p>' +
                        '</td>' +
                        '<td style="width: 70%; padding:0;  ">' +
                            '<p>Label<p>' +
                        '</td>' +
                        '<td style="width: 10%">' +
                            '<img alt="" src="Images/noselected.png" class="selectImage" />' +
                        '</td>' +
                   '</tr>' +
                '</table>' +
         '</div>');

            counter++;


        });
});

and i want to select only one section – when i click on it, i want to change background and src for image. And only one section can be selected. How can i do this?

i try to use something like this:

$('.listItem').click(function () {
            $(this).toggleClass('selectedItem');
            //                $('#section').css('background-color', '#D7D7D7');
            //                $('#section > img').attr('src', 'Images/Selection.png');
        });

But it not work correctly.

Answer 1

Well, if you’re adding many of these, then you don’t want to put id="section" in the added divs. This would add many of the same id in the page, and you don’t want that. That item already has the class listItem and you’re using that for the click target, so you don’t need the id at all – remove it.

$(document).ready(function () {
    var counter = 1;

    $('#AddSectionButton').click(function () {
        $('div#bottomLeftContent').append(
        '<div class="listItem">' +
            '<table class="sectionTable">' +
                '<tr>' +
                    '<td style="width: 20%; padding:0;">' +
                        '<p>' + counter + ':' + '</p>' +
                    '</td>' +
                    '<td style="width: 70%; padding:0;  ">' +
                        '<p>Label<p>' +
                    '</td>' +
                    '<td style="width: 10%">' +
                        '<img alt="" src="Images/noselected.png" class="selectImage" />' +
                    '</td>' +
               '</tr>' +
            '</table>' +
     '</div>');

        counter++;


    });
});

Then in your .listItem click handler, you need to target things correctly. Try this:

$('.listItem').live('click', function () {

    // first revert any selected items back to initial state
    $('.selectedItem').css('background-color', '#FFFFFF');
    $('.selectedItem').find('img').attr('src', 'Images/noselected.png');
    $('.selectedItem').removeClass('selectedItem');

    // now mark the clicked item as selected
    $(this).toggleClass('selectedItem');
    $(this).css('background-color', '#D7D7D7');
    $(this).find('img').attr('src', 'Images/Selection.png');

});