首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >$(".grid").mouseenter在我创建新的div之后不运行

$(".grid").mouseenter在我创建新的div之后不运行
EN

Stack Overflow用户
提问于 2015-05-15 08:50:17
回答 3查看 63关注 0票数 1

我的$(".grid").mouseenter在我按下新按钮后不会运行,这个按钮会删除旧的div (.grid)并创建新的。那么,在那之后,我能改变什么来让它发挥作用呢?另外,为什么在所有的.grid div中都有空空间呢?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ready(function(){
    createGrid();
    $(".grid").mouseenter(function(){
        $(this).addClass("hovered")
    });
    $("#new").click(function(){
        clear();
        createGrid(prompt("How big would you like your new grid to be (x<64)?"));
    });
    $("#clear").click(function(){
        clear();
    });
});
function clear(){
    $(".grid").removeClass("hovered");
};
function gridSize(measuring, howBig){
    if (howBig==null){
        howBig = 16;
    }
    switch(measuring){
        case "height":
            return parseInt($("#surface").height()/howBig);
        case "width":
            return parseInt($("#surface").width()/howBig);
    }
};
function createGrid(howBig){
    $("#surface").empty();
    if(howBig == null || howBig == ""){
        for(var i=0; i < 16; i++){
            $("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width')+"px ; height:"+gridSize('height')+ "px;'></div>");
            for(var j=0; j < 15; j++){
                $("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width')+"px ; height:"+gridSize('height')+ "px;'></div>");
            }
        }
    }
    else { 
        for(var i=0; i < howBig; i++){
            $("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width', howBig)+"px ; height:"+gridSize('height', howBig)+ "px;'></div>");
            for(var j=0; j < howBig-1; j++){
                $("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width', howBig)+"px ; height:"+gridSize('height', howBig)+ "px;'></div>");
            }
        }
    }
};
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* { margin:0; padding:0; }
.wrapper {
    width: 800px;
    margin: 0px auto;
}
#reset {
    width: 60px;
    margin : 15px auto;
}
#surface {
    margin: 0px auto;
    width: 800px;
    height: 800px;
}
.grid {
    background-color: #D3D3D3;
    margin: 0px;
    display: inline-block;
}
.hovered {
    background-color: black;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet"  href = "css/styles.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src = "js/script.js"></script>
</head>
<body>
    <div class = "wrapper">
        <button id ="new">New</button>
        <button id ="clear">Clear</button>
        <div id = "surface"></div>
    </div>
</body>
</html>

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-05-15 08:52:48

取代:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(".grid").mouseenter(function(){
    $(this).addClass("hovered")
});

使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#surface").on('mouseenter','.grid',function(){
    $(this).addClass("hovered")
});

这是必需的,因为原始代码将事件处理程序附加到.grid元素,删除并创建新元素(这些元素没有附加处理程序)。您可以在创建新元素时重新运行原始代码来附加新的处理程序,但是使用事件委托是一种更好的方法,因为您只在一个元素(#surface)上附加事件处理程序,而不是在每个单独的.grid元素上附加事件处理程序,当然,由于您没有删除和重新创建#surface元素,所以在创建新网格时不需要分离/重新附加它。

您可以在这里阅读有关jQuery的on方法和事件委托的更多信息:http://api.jquery.com/on/

至于间距问题,这是因为您正在使用内联块元素,如果元素之间存在内联元素,则内联元素将至少保留一个空格。您可以删除元素之间的所有空格(和换行符),也可以将font-size:0;放置在#surface元素上,从而将空间大小缩小到零。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
maxSize=16;
$(document).ready(function(){
    createGrid(16);
    $("#surface").on('mouseenter','div',function(){
        $(this).addClass("hovered")
    });
    $("#new").click(function(){
        createGrid(prompt("How big would you like your new grid to be (x<" + maxSize + ")?"));
    });
    $("#clear").click(function(){
        $("#surface>div").removeClass("hovered");
    });
});
function gridSize(measuring, howBig){
    switch(measuring){
        case "height":
            return parseInt($("#surface").height()/howBig);
        case "width":
            return parseInt($("#surface").width()/howBig);
    }
};
function createGrid(howBig){
    howBig=parseInt(howBig);
    if(howBig == NaN || howBig<1 || howBig>maxSize){
      howBig=16;
    }
    $("#surface").empty();
    for(var i=0; i < howBig*howBig; i++){
      $("#surface").append("<div style='width:" +gridSize('width', howBig)+"px; height:"+gridSize('height', howBig)+ "px;'></div>");
    }
};
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* { margin:0; padding:0; }
.wrapper {
    width: 800px;
    margin: 0 auto;
}
#reset {
    width: 60px;
    margin : 15px auto;
}
#surface {
    margin: 0 auto;
    width: 800px;
    height: 800px;
    font-size: 0;
}
#surface>div {
    background-color: #D3D3D3;
    margin: 0;
    display: inline-block;
}
#surface>div.hovered {
    background-color: black;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/styles.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div class="wrapper">
        <button id="new">New</button>
        <button id="clear">Clear</button>
        <div id="surface"></div>
    </div>
</body>
</html>

我还冒昧地为您清理了一些javascript。

票数 2
EN

Stack Overflow用户

发布于 2015-05-15 08:53:47

您需要使用事件委托来处理动态创建的元素。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#surface").on('mouseenter','.grid',function(){
     $(this).addClass("hovered");
});

---> https://learn.jquery.com/events/event-delegation/

票数 1
EN

Stack Overflow用户

发布于 2015-05-15 09:00:49

它不能工作,因为在将操作附加到它之后创建的div必须使用以下语句之一:

示例1:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("body").on('mouseenter','.grid',function(){
     $(this).addClass("hovered");
})

http://api.jquery.com/on/

示例2:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("body").live('mouseenter','.grid',function(){
     $(this).addClass("hovered");
})

http://api.jquery.com/live/

示例3:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("body").delegate('mouseenter','.grid',function(){
     $(this).addClass("hovered");
})

http://api.jquery.com/delegate/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30264780

复制
相关文章
css适配屏幕尺寸大小自适应
改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。
AlexTao
2020/02/13
6.2K0
利用max-height适应多尺寸屏幕的下拉动画
移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处为事件响应热区,点击后展开或收起红框2的
寒月十八
2018/01/30
1.3K0
利用max-height适应多尺寸屏幕的下拉动画
DC电源模块不同的尺寸可以适应实际应用场景
DC电源模块是现代电子设备的必备部件之一,其可提供稳定的直流电源,保证电子设备正常运行。DC电源模块尺寸的选择直接影响到其适应的应用场景及其性能表现。本文将从尺寸方面分析DC电源模块的适应性,探讨其不同尺寸之间在实际应用场景中的差异。
河北稳控科技
2023/08/29
1450
DC电源模块不同的尺寸可以适应实际应用场景
PHP自动裁剪图片输出来实现适应不同尺寸的显示
V站笔记 原图 200*200:http://tv1314.com/content/uploadfile/201703/0eac1488598225.jpg?param=200y200 400*40
V站CEO-西顾
2018/06/10
2.3K0
PHP自动裁剪图片输出来实现适应不同尺寸的显示
Cocoa Iphone 屏幕尺寸
1、状态栏:通常是20px高,在打电话或显式消息时,放大到40px。因此,在纵向模式下,应用程序的可用空间是320×460,横向模式下是480×300;
全栈程序员站长
2022/08/28
3910
img标签不同设备加载不同尺寸的图片的几种方法
一般来说,桌面端显示的是大尺寸的图像,文件体积较大。手机的屏幕较小,只需要小尺寸的图像,可以节省带宽,加速网页渲染。
javascript.shop
2019/09/04
7K0
css页面自适应屏幕大小_html图片自适应屏幕
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170364.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/21
8.1K0
css页面自适应屏幕大小_html图片自适应屏幕
iPhone 各屏幕尺寸及解析[通俗易懂]
表示沿着对角线,每英寸所拥有的像素(pixel)数目,PPI的数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高,颗粒感越弱,图像更清晰。
全栈程序员站长
2022/07/26
3.3K0
iPhone 各屏幕尺寸及解析[通俗易懂]
如何实现RTS游戏中鼠标在屏幕边缘时移动视角功能
本文简单介绍如何在Unity中实现即时战略游戏中鼠标在屏幕边缘的时候移动视角的功能,如图所示:
CoderZ
2022/12/26
1.2K0
如何实现RTS游戏中鼠标在屏幕边缘时移动视角功能
Android 获取屏幕尺寸与密度
android中获取屏幕的长于宽,参考了网上有很多代码,但结果与实际不符,如我的手机是i9000,屏幕大小是480*800px,得到的结果却为320*533
阳光岛主
2019/02/19
2.6K0
折叠屏开发指导系列①丨屏幕兼容性解读:如何支持不同屏幕的尺寸和像素密度
折叠屏设备从展开到折叠的切换过程中,同一个设备可能出现多种屏幕尺寸的使用状态。这让开发者在应用程序适配中面临着不小的挑战,比如说屏幕难以完美适配,导致的UI错位以及反应迟缓等体验性问题,本文将从app设计和开发过程中给出支持不同屏幕尺寸和像素密度建议指导,确保应用界面能够在各类屏幕上美观的呈现。
软件绿色联盟
2022/03/31
1.5K0
折叠屏开发指导系列①丨屏幕兼容性解读:如何支持不同屏幕的尺寸和像素密度
创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上。与此同时,系统提供APIs允许你控制应用界面为特定的屏幕尺寸和密度,为不同屏幕的配置提供最优化的用户界面设计。例如,你可能会要一个平板电脑的用户界面,这不同于手机的用户界面。 虽然系统能缩放,调整其尺寸,以使应用软件工作在不同屏上,但是应该尽量优化应用软件适应不同的屏幕尺寸和密度。为此,对所有设备的用户体验应最大化且应让用户们相
欢醉
2018/01/22
2.7K0
Android官方提供的支持不同屏幕大小的全部方法
为了确保你的布局能够自适应各种不同屏幕大小,你应该在布局的视图中使用"wrap_content"和"match_parent"来确定它的宽和高。如果你使用了"wrap_content",相应视图的宽和高就会被设定成刚好能够包含视图中内容的最小值。而如果你使用了"match_parent"(在Android API 8之前叫作"fill_parent"),就会让视图的宽和高延伸至充满整个父布局。
黄啊码
2020/05/29
1.6K0
不同尺寸晶圆&基板的参数
晶圆依靠基板进行生长或者进行芯片工艺。所以一般说晶圆的尺寸,也可以说是基板的尺寸。
用户2760455
2022/06/08
5.3K0
不同尺寸晶圆&基板的参数
LabVIEW自适应屏幕分辨率的两种方法
前阵子做的一个项目是在显示器分辨率为 2560*1600,缩放选项为 150% 的笔记本上开发的,但是当 vi 文件在另一台显示器分辨率为 1920*1080,缩放选项为 150% 的笔记本上时出现了显示不完全的问题,也就是说,换成了低分辨率的显示器后,并没有自适应屏幕,因此花费了一点儿时间解决了这个问题,在此记录一下。
Gnep@97
2023/08/10
1.4K0
LabVIEW自适应屏幕分辨率的两种方法
理一理屏幕尺寸那些事
其中configuration.fontScale是根据系统字号改变的,默认是1,所以会遇到dp和sp混用无影响的情况。但,一旦用户改变了系统字号,有一定的缩放量,dp的为sp就原形毕露了,所以字体还是乖乖用sp,别没事找事。
张风捷特烈
2018/12/21
9390
为任意屏幕尺寸构建 Android 界面
在过去的 12 个月内,有约 1 亿台新平板设备被激活,Chrome OS 的激活量增长了 92%,是增长速度最快的桌面平台。这意味着在平板电脑、可折叠设备和 Chrome OS 设备上,有超过 2.5 亿台大屏幕设备运行着 Android 系统,而关于可折叠设备的使用数量也在不断增长,同比增长超过 250%,因此,"大屏" 正在成为 Android 设备中一个重要且增长势头最快的细分市场。这也让设备制造厂商们意识到,针对大屏做优化是让设备在高端手机细分市场中脱颖而出的机会。
Android 开发者
2022/03/25
4.2K0
为任意屏幕尺寸构建 Android 界面
理一理屏幕尺寸那些事
其中configuration.fontScale是根据系统字号改变的,默认是1,所以会遇到dp和sp混用无影响的情况。但,一旦用户改变了系统字号,有一定的缩放量,dp的为sp就原形毕露了,所以字体还是乖乖用sp,别没事找事。
张风捷特烈
2018/12/21
9200
点击加载更多

相似问题

处理不同Android屏幕尺寸的最好方法?

33

构建多种屏幕尺寸的最好方法是什么?

30

调整游戏尺寸以适应不同的屏幕尺寸

11

在SpriteKit游戏中处理不同的屏幕尺寸

10

在不同屏幕尺寸下最好的方式是什么{屏幕宽度-屏幕高度-最小屏幕宽度}

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文