jQuery: undefined on object with the correct selector

Question

I've got a problem with jQuery: I've the following html code:

<div class="side-finder">
<div class="brand"><img src="/img/test.net-logo.png" /></div>
<div class="finder-content">
    <ul class="nav nav-pills nav-stacked" id="finder-menu">
        <li>
            <a href="#!cat/cars" class="slide-left1" data-toggle="slide-left" data-source="#sc1" data-step="1" role="button" aria-expanded="false">Autos &gt;</a>
            <ul class="hide" id="sc1">
                <li>
                    <a href="#!cat/cars" class="slide-left2" data-toggle="slide-left" data-source="#sc1.1423423" data-step="2" role="button" aria-expanded="false">Bauteile &gt;</a>
                    <ul class="hide" id="sc1.1423423">
                        <li><a href="#">Innenfutter</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="btn-back1">&lt; Zurück</a></li>
                    </ul>
                </li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#" class="btn-back1">&lt; Zurück</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav nav-pills nav-stacked hide" id="finder-child1">
    </ul>
    <ul class="nav nav-pills nav-stacked hide" id="finder-child2">
    </ul>
</div>

And this jQuery code:

    var $finderTopObj = $('#finder-menu');
    var $originalTopHtml = $finderTopObj.html();

    $('.slide-left1').click(function(e) {
        console.log('click 1');
        var $clickedItem = $(this);
        var $sourceId = $(this).attr('data-source');
        console.log('step 2 ('+$sourceId+')');

        $clickedItem.addClass('active');
        var $sourceHtml = $($sourceId).html();
        var $targetObj = $('#finder-child1');
        console.log('set html to '+$targetObj.selector);
        $targetObj.html($sourceHtml);
        $finderTopObj.animate({
            width: "50%"
        }, 200, function () {
            $finderTopObj.addClass('col-md-6');
            $targetObj.addClass('col-md-6');
            $targetObj.removeClass('hide');
            console.log('done step 1------------');

            $('.slide-left2').click(function(e) {
                console.log('click 2');
                var $clickedItem2 = $(this);
                var $sourceId2 = $clickedItem2.attr('data-source');
                console.log('step 2 ('+$sourceId2+')');

                $clickedItem2.addClass('active');
                var $sourceHtml2 = $($sourceId2).html();
                console.log($sourceHtml2);
                var $targetObj2 = $('#finder-child2');
                console.log('set html to '+$targetObj2.selector);
                $targetObj2.html($sourceHtml2);
                $finderTopObj.animate({
                    width: "33%"
                }, 200, function () {
                    $finderTopObj.removeClass('col-md-6');
                    $finderTopObj.addClass('col-md-4');
                    $targetObj.removeClass('col-md-6');
                    $targetObj.addClass('col-md-4');
                    $targetObj.animate({
                        width: "33%"
                    }, 200, function () {
                        $targetObj2.addClass('col-md-4');
                        $targetObj2.removeClass('hide');
                        console.log('done step 2------------');
                    });
                });
            });
        });
    });

The problem is: the var "$sourceHtml2" is undefined and I can't find the wrong code. Is there someone who can help? Thanks!

For testing: It's based on bootstrap 3. Maybe this css code will also help to test it.

.side-finder {
    font-size: 12px;
    font-weight: 200;
    background-color: #2e353d;
    top: 0px;
    width: 100%;
    color: #333333;
    height: 100vh;
}

.side-finder .brand {
    background-color: #23282e;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 14px;
}

.side-finder li a, .side-finder li a:hover,.side-finder li a:focus {
    background-color: transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #cacaca;
    font-weight: bold;
    border-bottom: 1px solid #53585e;
}

.side-finder li a:hover {
    color: #efefef;
}

.side-finder li a.active  {
    background-color: #3e656d;
}

.side-finder .finder-content {
    overflow: auto;
    height: 100%;
}

adeneo · Accepted Answer · 2015-03-04 12:41:28Z

1

You have a data attribute that looks like

#sc1.1423423

note the period, then you do some getting and use a variable and you end up with

$('#sc1.1423423')

Note how that matches an element with the ID sc1 and the class 1423423
To make it work in jQuery the period has to be escaped

$('#sc1\\.1423423')

The right thing to do would be to not use periods in the ID, but if that's not an option, you can try replacing it

$sourceId2 = $clickedItem2.attr('data-source').replace('.', '\\.');

answered Mar 4, 2015 at 12:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4144415 Over a year ago

Oh ok, thats logically... Thanks! :D

Collectives™ on Stack Overflow

jQuery: undefined on object with the correct selector

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related