Issue with selector in Ajax result using jQuery

Question

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:

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:

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

user3068160 · Accepted Answer

Actually there's issue with AJAX...
There is not any thing wrong with selectors,

you've defined that the application send an Ajax request to the server and insert the HTML result in this div again with every click on div.mostatila#logo...!!!
So,
when you click on every place inside the page, you are clicking on the #logo in fact...

you have to limit the Ajax request to a situation, for example:

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

then, when the #logo have width:250px, Ajax request will sent...
I think this is the problem...

Issue with selector in Ajax result using jQuery

Answers (1)

Related Questions