首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何检测生成元素上的单击?

如何检测生成元素上的单击?
EN

Stack Overflow用户
提问于 2012-05-02 18:46:51
回答 5查看 100关注 0票数 1

我正在从JSON数据中创建一组元素:示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
'name':'form',
'elements':[
{'name':'bt1','type':'button','value':'hello','order':'1'},
{'name':'img1','type':'image','value':'http://www.images.com/img.jpg','order':'2'}]
}

我用这个json创建一个表单,其中包含“元素”中描述的元素,代码如下:

(我在mumbo jquery代码中找到了这个草稿)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#container').html();//clears the container
for each element in elements do
    switch element.type
          case 'button':
          $('#container').append('<input type="submit" value="'+element.value + ... etc');
          end case
          case 'image':
          insert image bla bla bla
    end switch
end for each

我想要检测一个元素是否被点击或另一种动作,比如鼠标悬停等等。我如何将它绑定到元素上?此外,如何在不破坏元素的情况下更新元素?

编辑:我暗示了一些重要的东西,我的错:我需要将元素javascript对象中的数据与生成的html元素链接起来。当操作被触发时,我检索的数据字段。这就是这一切的豪宅。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2012-05-02 19:26:07

构建表单非常容易,因为基本上已经映射了对象sytanx中元素的所有属性。因此,我们只需选择一个标记就可以创建这些元素,并将属性对象作为jQuery函数的第二个参数传入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* Container reference, counting variable */
var container = $("#container"), i = 0;

/* Clear out the container */
container.html("");

/* Cycle through each element */
while ( current = data.elements[i++] ) {
  /* Evaluate the value of the current type */
  switch ( current.type ) {
    /* Since <input type='button|image'> are so similar, we fall-through */
    case "button":
    case "image" :
      /* Choose a base element, pass in object of properties, and append */
      $("<input>", current).appendTo(container);
      break;
  }
}

当涉及到注册单击或任何其他类型的事件时,我们将使用$.on方法。因为我们传递的是一个选择器(在本例中是“输入”),这不仅将匹配所有当前元素,而且还将匹配所有未来的元素。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* Listen for all clicks on input elements within the container */
container.on("click", "input", function(){
  /* We have a button, and an image. Alert either the value or src */
  alert( this.value || this.src );
});

在线演示:http://jsbin.com/izimut/edit#javascript,html

票数 1
EN

Stack Overflow用户

发布于 2012-05-02 18:51:09

你有两个选择。您可以在创建元素之后绑定侦听器,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var $input = $('<input type="submit" value="'+element.value + ... etc')
                  .focus(...).blur(...).etc.;

$('#container').append($input);

或者,您可以使用事件委托。在初始页面加载时,您可以这样做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#container").on( "focus", "input", function(){...});

这将涵盖当前或稍后动态添加的#container中的所有输入元素。您可以在医学博士中阅读更多关于事件委托的内容。

票数 2
EN

Stack Overflow用户

发布于 2012-05-02 18:51:43

要检测动态添加的元素上的事件,应将on()用于jQuery 1.7+,而将.live()用于以前的版本。

编辑:和yes,正如詹姆斯在评论中指出的,delegate()总是被推荐而不是live()

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

https://stackoverflow.com/questions/10424444

复制
相关文章
【Android 组件化】路由组件 ( 使用 JavaPoet 生成路由表类 )
在 【Android 组件化】路由组件 ( 构造路由表中的路由信息 ) 博客中解析了注解的节点及注解属性 , 将路由信息封装在了 RouteBean 中 ;
韩曙亮
2023/03/29
6160
【Android 组件化】路由组件 ( 使用 JavaPoet 生成路由表类 )
【Android 组件化】路由组件 ( 路由组件结构 )
在之前博客 【Android 组件化】使用 Gradle 实现组件化 ( 组件 / 集成模式下的 Library Module 开发 ) 的组件化项目中 , 可能涉及到跨 Module 的调用 , 如在 library1 模块中打开 library2 模块中的 Activity 界面 , 或调用其它 Module 中的功能 ;
韩曙亮
2023/03/29
4400
【Android 组件化】路由组件 ( 路由组件结构 )
【Android 组件化】路由组件 ( 路由框架概述 )
路由框架 仅限于在 集成模式 下使用 , 组件模式下 , 路由框架不起任何作用 ;
韩曙亮
2023/03/29
5330
vue 路由组件
单页应用(single page web application,SPA),是在一个页面完成所有的业务功能,浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面完成,这一切都由JavaScript来控制。
章鱼喵
2019/10/17
6250
【Android 组件化】路由组件 ( 构造路由表中的路由信息 )
在【Android 组件化】路由组件 ( 注解处理器参数选项设置 ) 博客中在注解处理器中 , 获取了在 build.gradle 中设置的参数 ;
韩曙亮
2023/03/29
5520
【Android 组件化】路由组件 ( 构造路由表中的路由信息 )
eclipse如何根据类名查找该类所属的maven组件
这个需求是后期整改项目或者看别人的代码时有时会遇到的一个问题,我的解决方案类似于曲线救国,下面给出思路:
johnhuster的分享
2022/03/29
9130
eclipse如何根据类名查找该类所属的maven组件
根据公司的业务需求我是如何封装组件的
作者:lin1997 原文链接:https://juejin.im/post/6888125003024629768
coder_koala
2020/11/10
3.7K0
根据公司的业务需求我是如何封装组件的
ASP.NET的路由系统:根据路由规则生成URL
前面我们已经提到过,ASP.NET 的路由系统主要具有两个方面的应用,其一就是通过注册URL模板与物理文件路径的匹配实现请求地址和物理地址的分离;另一个则是通过注册的路由规测生成一个相应的URL。后者通过调用RouteCollection类型的GetVirtualPath方法来实现。[源代码从这里下载] 如下面的代码片断所示,GetVirtualPath定义了两个GetVirtualPath方法重载,它们共同的参数requestContext和values分别表示请求上下文(RouteData和HTTP上下
蒋金楠
2018/01/15
1.3K0
ASP.NET的路由系统:根据路由规则生成URL
【Android 组件化】路由组件 ( 注解处理器中使用 JavaPoet 生成代码 )
在 【Android 组件化】路由组件 ( 注解处理器获取被注解的节点 ) 博客中 声明了 支持的注解类型 , 并在 Activity 中使用了注解 , 在 注解处理器 中检测出来使用注解的 类节点 TypeElement ;
韩曙亮
2023/03/29
4970
【Android 组件化】路由组件 ( 注解处理器中使用 JavaPoet 生成代码 )
React路由 及 React 路由中核心组件
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/136454.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/07
1.4K0
【Android 组件化】路由组件 ( 组件间共享的服务 )
路由除了支持 Activity 之外 , 还要支持 组件间共享的服务 如 工具类 , 逻辑功能 等 ;
韩曙亮
2023/03/29
8720
【Android 组件化】路由组件 ( 组件间共享的服务 )
Vue 组件通信与路由
命名路由 绑定自定义的属性:to =" {name: '路由的名字'}” 路由的参数 path: ' /user/:id :to= "{name: 'user' , params:{id:1}}" path: ' /user' :to= " {name:'user' , query:{userId:1}}" 嵌套路由(应用子的路由是不同的页面结构) /home/music ===> /home/ movie 一个router-view中嵌套 另外一个route-view
默默的成长
2022/10/29
7100
springboo根据目录结构自动生成路由前缀
配置文件中配置api的根目录 missyou: api-package: com.lin.missyou.api 重写getMappingForMethod方法 import org.springframework.beans.factory.annotation.Value; import org.springframework.web.servlet.mvc.method.RequestMappingInfo; import org.springframework.web.servlet.mvc.m
听城
2020/05/09
5920
如何使用Vue封装组件[通俗易懂]
想封装组件呢首先要思考: 1.你想向用户暴露哪些属性 (props) 2.你想向用户暴露哪些事件,让用户监听来处理后续的业务 ($emit,@) 3.你想让用户嵌入哪些自定义的内容(slot)
全栈程序员站长
2022/11/09
1.7K0
如何在路由绑定中使用 IParsable
IParsable 是 .Net 7 中新增的接口,它可以将字符串转换为对应的实体。在 Controller 的 Route 绑定中可以使用 IParsable 来绑定复杂的实体。
newbe36524
2023/08/23
1460
Vue使用bus进行组件间、父子路由间通信
Vue使用bus进行组件间、父子路由间通信
Java架构师必看
2021/09/14
5270
ETL(八):路由器(rounter)转换组件的使用
注意:edw_emp_deptno_20和edw_emp_deptno_30都要按照图中方式进行修改。 ⑤ 使用CTRL + S保存该创建的任务;
数据分析与统计学之美
2021/11/25
5280
路由组件传参实例 原
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的URL上使用,限制了其灵活性
tianyawhl
2019/04/04
7190
【Android 组件化】路由组件 ( 生成 Root 类记录模块中的路由表 )
注解处理器 为每个 Module 模块生成一个路由表 , 该模块下凡是被 @Route 标注的路由节点都在该路由表中维护 ;
韩曙亮
2023/03/29
2.6K0
【Android 组件化】路由组件 ( 生成 Root 类记录模块中的路由表 )
如何使用小程序表单组件
上一篇文章中,我们给大家介绍了小程序的视图容器及基础内容组件,该组件主要应用是输出内容。接下来这篇文章中,我们将继续介绍小程序最常用的表单组件,该组件主要应用是获取输入内容。表单组件分为11个组件,我们将对这11个组件使用做详细的介绍。
此昵称已隐藏_
2018/11/06
5.2K0

相似问题

如何从基类初始化属性?

220

在基类和派生类中初始化基类属性

40

声明派生类的对象,初始化基类的属性

11

初始化基类

22

是否将基类初始化为派生基类?

33
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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