CODEWITHSUNDEEP
jqueryasp.net
Andriy Khrystyanovich
Andriy Khrystyanovich

Reputation: 1452

jquery how to select div

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.

Upvotes: 0

Views: 314

Answers (2)

swatkins
swatkins

Reputation: 13630

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

});

Upvotes: 2

Jack
Jack

Reputation: 8941

Try this: http://api.jquery.com/live/

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

EDIT:

Delegate version:

$('#bottomLeftContent').delegate('.listitem','click', function () {
                $(this).toggleClass('selectedItem');
});

Upvotes: 3

Related Questions