使用jQuery在Ajax结果中选择器的问题

我有一个包含一些立方体的页面…
当用户单击多维数据集时，多维数据集的宽度和高度将发生变化，并使用Ajax获取相关内容。
Ajax的结果是另一个html页面本身，其中有一些jQuery命令。请查看result页面:

<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 -->

和

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是主页元素'

和 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);
    });
});

这些线是#logo在main page:中的结构

<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>

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;
}

/*/-------------  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

});

当我选择其他元素的结果页，如wrapperProduct或mainContent等…，动画方法工作得很好，但只是在$('.thumb')中，点击箭头div后没有结果…
我觉得我的css有问题，可能是whitespace:nowrap，因为这是我第一次使用这个命令…
我相信这是因为我对CSS概念的误解…
请指导我的写作方式，并帮助找出我的错误…