Q:

Jquery image .attr('src') failed

I have a list of collapsible times like "9:00 - 10:00" and near that there is a image of cross.. when you open collapsed, there is 2 inputs. I want to make that if you fill this to inputs.. Cross change to a check... but i failed to do that..when i fill the inputs nothing happening.. i don't understand what's wrong...Show me my mistake, please.. maybe the problem is similar to problem i had before -> Jquery Calendar - .attr('id') get wrong value
EDIT: i tested it$(collapsibleID).attr('style' , 'background:green'); instead of changing picture, and it's working.. not as good as i want but working.. the problem is with picture declarion?
Keydown event->>>>
var collapsibleID = '#'+$('.added').parent('spanTimetable').attr('id');
var pictureID = '#'+$('.checkOrCross').attr('id');

$(collapsibleID).find('.projectName').keydown(
        function() {

    if ($(this).val() != ""
                            && $(collapsibleID).find('.projectEntry')
                                    .val() != "") {
        $(pictureID).attr('src' , 'pics/check.png');

                    }
                })

$(collapsibleID).find('.projectEntry').keydown(
        function() {

    if ($(collapsibleID).find('.projectName').val() != ""
                            && $(this).val() != "") {
        $(pictureID).attr('src' , 'pics/check.png');

                    }
                })

Draw template ->>>
function drawTemplate() {
    var selectedValue = parseInt($('#timeDropList').val());

    var textProjectName = '<center>Project Name:</center><center> <input data-theme="c" type="text" class="projectName" value="" /></center>';
    var textProjectData = '<center>Entry:</center><center> <input data-theme="c" style="height:50px;" type="text" class="projectEntry" value="" /></center>';

    var timespan = new Date(2011, 7, 11, 9, 0);

    while (timespan.getHours() < 18 || timespan.getHours() == 18 && timespan.getMinutes() == 0) {
        var hoursFrom = timespan.getHours();
        var minsFrom = timespan.getMinutes();
        if (minsFrom < 10) {
            minsFrom = "0" + minsFrom;
        }
        if (hoursFrom < 10) {
            hoursFrom = "0" + hoursFrom;
        }
        var hoursTo = timespan.getHours();
        var minsTo = timespan.getMinutes() + selectedValue
        if (minsTo == 60) {
            minsTo = "00";
            hoursTo++;
        } else if (minsTo < 10) {
            minsTo = "0" + minsTo;
        }

        var collDiv = '<div class="added" data-theme="c"  data-role="collapsible" id='+hoursFrom+minsFrom+hoursTo+minsTo+' data-collapsed="true"><h3 id="results-header">'
                + hoursFrom
                + ":"
                + minsFrom
                + " - "
                + hoursTo
                + ":"
                + minsTo
                + '<img style="height:15px;width:15px;margin-left:30px;" class="checkOrCross" id='
                +hoursFrom
                +minsFrom
                +hoursTo
                +minsTo
                +' src="pics/cross.png" /></h3>'
                + textProjectName
                + textProjectData
                + '</div>';
        $('.spanTimetable').append(collDiv);
        timespan.setMinutes(timespan.getMinutes() + selectedValue);

    }

HTML->>
<div data-role="page" id="MSchedule">

    <header data-role="header">
        <h4>Schedule</h4>
    </header>
    <div data-role="content" id="content" style="width: 100%">
        <div class="ui-block-c" id="blockC" style="width: 100%">
            <div id="spanNav">
                <div class="spanNav-rowTimetable" id="spanNav-row1">
                    <select name="timeDropList" id="timeDropList">
                        <option value="6">6 Minutes</option>
                        <option value="10">10 Minutes</option>
                        <option value="15">15 Minutes</option>
                        <option value="30">30 Minutes</option>
                        <option selected value="60">1 Hour</option>
                        <option value="Vac">Vacation</option>

                    </select>

                </div>

            </div>
            <div id="timetable" data-role="collapsible-set"
                class="spanTimetable"></div>
        </div>
    </div>

A:

var collapsibleID = '#'+$('.added').parent('spanTimetable').attr('id');
var pictureID = '#'+$('.checkOrCross').attr('id');

What is '#'+$, what are you trying to achieve?

Update 1
I am not as sharp at this point, but try:
var collapsibleID = '#'+($('.added').parent('.spanTimetable').attr('id'));
var pictureID = '#'+($('.checkOrCross').attr('id'));

Does it make any difference?

Update 2
Try:
$('input.projectName, input.projectEntry').keydown(function(){
    var $wrapper = $(this).parents('.added'),
        $projectName = $wrapper.find('input.projectName'),
        $projectEntry = $wrapper.find('input.projectEntry');
    if($projectName.val().length > 0 && $projectEntry.val().length > 0){
        $wrapper
            .find('img.checkOrCross')
            .attr('src' , 'pics/check.png');
    }
});

