Question

我有一个我调用的php脚本，它以一种可以直接插入容器或正文并且正常工作的方式返回html（E.X。'<image id="trolleyLogoEdge" class="pictureFrame party" src="tipsyTrixy.png" >'）。将此文字附加到div后，选择器$('#pictureFrame > img:first')将无效。我没有使用事件处理程序或任何东西，所以我不知道为什么我有问题。当我在div中使用图像标签而没有任何操作时，我的代码工作正常，所以我认为它必须是选择器问题。我已经测试了我的php输出，它在我决定动态填充div之前与div中的html完全匹配。

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

Answer 1

将数据附加到框架的代码在ID选择器中有拼写错误。

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

应该是

$('#pictureFrame').append(data);

Answer 2

.find()获取当前匹配元素集中每个元素的后代。

>选择由“parent”指定的元素“child”指定的所有直接子元素。尝试：

startSlideshow($("#pictureFrame").find("img:first"));

如果img不是#pictureFrame的直接孩子，则.find()应该有效。

Answer 3

你应该知道

之间的区别

委托活动

直接活动

检查this有关直接事件和委托事件之间的区别。

如果我们点击新添加的项目，则不会发生任何事情。这是因为我们之前附加的直接绑定事件处理程序。直接事件仅在调用.on（）方法时附加到元素。在这种情况下，由于调用.on（）时我们的新锚不存在，因此它不会获得事件处理程序。

将此link检查到官方JQuery文档以进一步说明。

附加后Jquery选择器不工作

3 个答案: