追加后Jquery选择器不起作用

Posted 2023-05-09

【中文标题】追加后Jquery选择器不起作用

【英文标题】：Jquery selector not working after append

【发布时间】：2014-01-05 15:58:06

【问题描述】：

我有一个我调用的 php 脚本，它以一种可以直接插入容器或主体并正常工作的方式返回 html（E.X.'<image id="trolleyLogoEdge" class="pictureFrame party" src="tipsyTrixy.png" >'）。将此文本附加到 div 后，选择器 $('#pictureFrame > img:first') 将不起作用。我没有使用事件处理程序或任何东西，所以我不知道我为什么会遇到问题。我的代码在div 中没有任何操作就可以正常工作，所以我假设它一定是选择器问题。在我决定动态填充 div 之前，我已经测试了我的 php 输出，它与 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);  
            

【问题讨论】：

你不应该在同一个页面上与一个 ID 和一个类同名。由于 img 具有 pictureFrame 类，而您在选择器中正在查看 ID 为 pictureFrame 的元素。

结果：$('#pictureFrame > img').length ???顺便说一句，我猜你的标记不完全一样，你应该提供一个样本

我有不同类别的图像。所有图片都具有用于 css 目的的类图片框架和用于其类别的附加类。 .length() 告诉我它是否是最后一个兄弟，所以我可以重新开始循环。

【参考方案1】：

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

$.post( "pictureDirectory.php", function( data ) 

    $('#picureFrame').append(data);
             ^^here
    startSlideshow($('#pictureFrame > img:first'));
);

应该是这样的

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

【参考方案2】：

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

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

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

如果img 不是#pictureFrame 的直接子级，.find() 应该可以工作。

【讨论】：

如果 img 不是 #pictureFrame 的直接子级，你可能是一个解决方案

对此解决方案稍作解释会有所帮助。

【参考方案3】：

你应该知道两者的区别

委托活动

直接事件

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

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

查看link 官方 JQuery 文档以获得进一步说明。