dto5637
dto5637
2013-12-17 18:19

附加后Jquery选择器不工作

  • jquery-selectors
  • dom
  • php
  • html
  • jquery

I have a php script that I call that returns html in a way that it can be directly inserted into a container or the body and just work (E.X. '<image id="trolleyLogoEdge" class="pictureFrame party" src="tipsyTrixy.png" >'). After appending this text to a div the selector $('#pictureFrame > img:first') won't work. I'm not using event handlers or anything so I don't know why I'm having an issue. My code worked fine when I just had the image tags in the div without any manipulation so I'm assuming it must be a selector issue. I have tested my php output and it is exactly matching the html that was in the div before I decided to dynamically populate the div.

        var classType = '';
        var classTypePrev = '';
        var width = $(window).width();
        var height = $(window).height();

        var size = (height + width)/2;
        var time = 0;
        $( document ).ready(function()
        {

            $.post( "pictureDirectory.php", function( data ) 
            {
                $('#picureFrame').append(data);
                startSlideshow($('#pictureFrame > img:first'));
            });

        });
        window.onresize = function() 
        {
            width = $(window).width();
        };
        function startSlideshow(myobj) 
        {


            classType = $(myobj).attr('class').split(' ')[1];
            if(classTypePrev != classType)
            {
                $('.picDescription').animate({'opacity': "0"},{duration: 2000,complete: function() {}});
                $('.picDescription.' + classType).animate({'opacity': "1"},{duration: 3000,complete: function() {}});
            }
            classTypePrev = classType;
            myobj.animate({left: "-=" + ((width/2)+ ($(myobj).width()/2) - 150), opacity: '1'},{
                duration: 5000,
                'easing': 'easeInOutCubic',
                complete: function() {}}).delay(2000).animate({left: "-=" + ((width/2)+ ($(myobj).width()/2) + 150), opacity: '0'},{
                    duration: 5000,
                    'easing': 'easeInOutCubic',
                    complete: function() 
                    {
                        $(myobj).css("left", "100%");
                    }
            });
            setTimeout(function()
            {
                var next = $(myobj).next();
                if (!next.length) 
                {
                    next = myobj.siblings().first();
                }
                startSlideshow(next)},9000);  
            }
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

3条回答

为你推荐