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

Question

我有一个包含一些立方体的页面...
当用户点击立方体时，立方体的宽度和高度将发生变化，相关内容将使用 Ajax 获取。
Ajax 结果是另一个 html 页面本身，它有一些 jQuery 命令。
请查看结果页面:

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

和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 是主页面元素`

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

中的结构

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

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


});

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

Answer 1

实际上 AJAX 有问题...
选择器没有任何问题，

您已定义应用程序向服务器发送 Ajax 请求，并在每次单击 div.mostatila#logo 时再次将 HTML 结果插入此 div ...! !!
所以，
当您点击页面内的每个地方时，您实际上是在点击 #logo...

您必须将 Ajax 请求限制在一种情况下，例如:

        if ( $(this).css('width') == '250px' ) {
            $.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).css('background','none');
                }
            });//Ajax
        }
        else {
            return; 
        }

然后，当#logo有width:250px时，Ajax请求将发送...
我认为这是问题...