Issue with selector in Ajax result using jQuery

I have a page that contains some cube...
When user click on the cubes, the cube's width and height will change and the related content will fetch using Ajax.
The Ajax result is another html page itself, that have some jQuery commands.
Please look at the result page:

HTML:

<div id="wrapperProducts">
<div class="products" id="mainContent">

  </div><!-- # mainContent -->
  <div class="products" id="rightPanel">

  </div><!-- # rightPanel -->
  <div class="products" id="footerPanel">

    <div class="arr" id="arrowRightFooter">
       <img src="images/arrows/light/arrowRight.png" width="30" height="30"  alt=""/>
     </div><!-- # arrowRightFooter -->

    <div id="thumbWrapper">
        <div class="thumb" id="t1">

        </div><!-- # t1 -->
        <div class="thumb" id="t2">

        </div><!-- # t2 -->
        <div class="thumb" id="t3">

        </div><!-- # t3 -->
        <div class="thumb" id="t4">

        </div><!-- # t4 -->
        <div class="thumb" id="t5">

        </div><!-- $ t5 -->
        <div class="thumb" id="t6">

        </div><!-- # t6 -->
        <div class="thumb" id="t7">

        </div><!-- # t7 -->
        <div class="thumb" id="t8">

        </div><!-- # t8 -->
        <div class="thumb" id="t9">

        </div><!-- # t9 -->
     </div><!-- # thumbWrapper-->

     <div class="arr" id="arrowLeftFooter">
       <img src="images/arrows/light/arrowLeft.png" width="30" height="30"  alt=""/>
     </div><!-- # arrowLeftFooter -->

  </div><!-- # footerPanel -->

and CSS:

div#logo div#wrapperProducts {
    width:100%;
    height:100%;
    background:url(../images/27.jpg) no-repeat;

}
div#logo div#wrapperProducts div#mainContent {
    left:0;
    top:60px;
    width:80%;
    height:70%;
    float:left;
    /*background-color:red;*/   
}
div#logo div#wrapperProducts div#rightPanel {
    right:-10px;
    top:0;
    width:20%;
    height:100%;
    float:right;
    position:absolute;
    /*background-color:blue;*/  
}
div#logo div#wrapperProducts div#footerPanel {
    bottom:0;
    left:0;
    position:absolute;
    width:80%;
    height:30%;
    /*background-color:#096;*/
}
div#logo div#wrapperProducts div#thumbWrapper {
    width:90%;
    height:100%;
    margin:auto;
    margin-right:5%;
    overflow:hidden;
    white-space:nowrap;
    /*background-color:;*/
}
div#logo div#wrapperProducts div#thumbWrapper .thumb {
    width:170px;
    height:100%;
    margin-right:2px;
    right:0;
    display:inline-block;/*inline-block*/
    position:relative;
    direction:rtl;
    background: linear-gradient(rgba(255,255,255, 0.2), rgba(255,255,255, 0) );
    background-color:transparent;

}
div#logo div#wrapperProducts div#footerPanel div.arr {
    position:absolute;
    width:30px;
    height:30px;
    cursor:pointer;
}
div#logo div#wrapperProducts div#footerPanel #arrowRightFooter {
    right:0;
    bottom:50%; 
}
div#logo div#wrapperProducts div#footerPanel #arrowLeftFooter {
    left:0;
    bottom:50%; 
}

div#logo is the main page element`

and JS:

$(document).ready(function(e) {
  /*"use strict";*/

$('#logo').css({'background':'none'});
  $('#arrowRightFooter').click( function(){


        console.log('The click button work fine');
        $('.thumb').animate({left: '+=170px' }, 1500);

    });
});

This lines are #logo's structure in main page:

HTML:

<div class="parts" id="part1">

    <div class="third" id="left">

      <div class="mostatil radif1" id="logo">

            <div class="imgWrapper">
              <img src="images/icons/new/basketStore.png" width="120" height="90"  alt=""/>
            </div>
      </div>
    <div>
</div>

CSS:

body {
    background:url(../images/background.png) no-repeat;
    background-color:rgb(24,1,83);
    font-family:"B Koodak", Tahoma;
}

div.parts {
    width:620px;
    height:800px;
    position:absolute;
}

div#part1 {
    margin-left:150px;
}

div.third {
    width:510px;
    height:640px;
    margin-top:100px;
}

div#left {
    margin-left:55px;   
}

div.third div.mostatil {
    width:250px;
    height:120px;   
}

div.third#left div.radif1 {
    margin-top:0px; 
}

div#logo {
    background-color:rgb(214,164,1);
    position:absolute;
    cursor:pointer;
}

and *jQuery: *

/*/-------------  C L I C K    ON    DIV # L O G O  --------------/*/
$(document).on('click', 'div.mostatil#logo', function(){

        $('div.moraba, div.mostatil').not('#logo').delay(500).fadeOut('fast');/**/

        var detail = {};
        detail.id               = $(this).attr('id');
        detail.class           = $(this).attr('class').substr(7);
        $(this)
                .animate({
                    width:         WinWidth,
                    height:           WinHeight,
                    marginTop:   -60,
                    marginLeft:  -210
                }, 100, 'easeOutQuint', false)
                .data({ id: detail.id, class: detail.class})
                .css({'z-index':500, 'cursor':'default'})
                .transition({rotateY:'360deg'}, 1000,'snap');

        $('body').css('overflow','hidden');

        $.ajax({
            type:'POST',
            url:"pages/Ajax/products.php",
            beforeSend: function() {
                $('#logo').html('LOADING; PLEASE WAIT...')
            },
            statusCode: {
                404: function(){
                    $(this).html('Page not found');
                }
            },
            success: function(result) {
                $('#logo').html(result);
            }
        });//Ajax


});

When I select other elements of result page like wrapperProduct or mainContent or etc..., the animate method works fine, but just in $('.thumb'), there is no result after click on arrow divs...
I think there is something wrong in my css, may be with whitespace:nowrap, because it's first time I'm using this command...
I believe it's because of misunderstanding CSS concepts by me...
Please guide me to the write way and help to figure out my fault...
Thanks in advance...