首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动态创建的图像行不会触发click事件

动态创建的图像行不会触发click事件,这是因为click事件是针对已经存在于DOM中的元素的。对于动态创建的元素,需要使用事件委托(event delegation)的方法来监听click事件。

事件委托是将事件监听器添加到父元素上,而不是直接添加到目标元素上。当事件触发时,事件会冒泡到父元素,然后在父元素上触发事件处理程序。在事件处理程序中,可以通过事件对象的target属性来获取触发事件的元素,然后根据需要进行处理。

以下是一个使用事件委托来监听动态创建的图像行的click事件的示例代码:

代码语言:javascript
复制
// 获取父元素
const parentElement = document.querySelector('#parent');

// 添加事件监听器
parentElement.addEventListener('click', function(event) {
  // 获取触发事件的元素
  const targetElement = event.target;

  // 判断触发事件的元素是否为图像行
  if (targetElement.classList.contains('image-row')) {
    // 处理click事件
    console.log('Image row clicked');
  }
});

// 动态创建图像行
const imageRow = document.createElement('div');
imageRow.classList.add('image-row');
parentElement.appendChild(imageRow);

在上面的示例代码中,我们首先获取了父元素,然后添加了一个click事件监听器。在事件处理程序中,我们通过事件对象的target属性获取了触发事件的元素,然后判断该元素是否为图像行。如果是图像行,则进行相应的处理。最后,我们动态创建了一个图像行,并将其添加到父元素中。由于使用了事件委托,即使是动态创建的图像行,也能够正常触发click事件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WPF 已知问题 开启 IsManipulationEnabled 之后触摸长按 RepeatButton 不会触发连续 Click 事件

RepeatButton 无法在触摸长按时候收到连续 Click 事件,以为是放在 ListBox 下 RepeatButton 存在奇怪问题 实际上他这个问题和 ListBox 没有任何关系...,仅仅只是因为开启了 IsManipulationEnabled 之后,为了实现触摸漫游,无法实时提升触摸为鼠标,从而导致了使用鼠标事件 RepeatButton 无法触发源源不断 Click 事件...RepeatButton 在触摸长按时不断触发 Click 事件,如下面代码例子,以下是 XAML 部分代码,可以看到只是简单在 ListBox 里面放入一个 RepeatButton 控件 <ListBox...事件不会源源不断触发。...,预计很长时间都不会解决这个问题 本文以上代码放在github 和 gitee 欢迎访问 可以通过如下方式获取本文源代码,先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码

17010
  • 进阶必备-Android Click事件是怎么触发

    在默认我们不做任何特殊设置时,三者能响应click事件只有Button。这是什么原因呢?...所以如果不在xml中设置,View和TextView是不会响应点击事件,那么我们翻开Button源码看下为什么唯独它是响应呢?...所以,我们猜测是在MotionEvent.ACTION_UP事件触发click。所以我们直接看if条件中ACTION_UP中逻辑: if (!...然后会通过Post Runable方式将PerformClick实例post到队列中等待处理,不直接去处理click事件而是使用post方式是确保如果有视图相关更新操作完成后再触发performClickInternal...因为onCLick事件是在手指抬起后触发,所以我们选择分析是ACTION_UP事件,但是长按事件是在我们长按某个View时候触发,所以并没有将手指抬起来。

    2.2K20

    iScroll click事件触发两次解决方案

    iScroll呢其实是截获了点击浏览器时touchstart和touchend事件。在touchend时候使用js去触发元素onclick事件(_end这个函数)。...而在实际操作中,先执行了touchend,然后再执行了一次onclick相关函数。这样就形成了头疼一次点击两次触发!...网上有很多代码说解决“iScroll click事件”点击一次触发两次,我也是按着各位大神步骤写,但是依旧不成功,也可能是操作不对,我附上我执行操作代码,我已经成功。...解决方案1:点击事件使用Zepto tap ,进行解决。 解决方案2:在iscroll搜索that.doubleTapTimer将其注释掉 或者 直接注释以下557-573即可!...ev = doc.createEvent('MouseEvents'); ev.initMouseEvent('click

    1.3K20

    DataGrid中DropDownList动态绑定和触发DropDownList事件

    大家好,又见面了,我是你们朋友全栈君。...我在写DataGrid控件中子控件事件时候,DropDownList事件相比而言麻烦一点,在此,我简单罗列如下(我在此处为了方便这里都用DataGrid中隐藏列存储我所要数据): 一、DropDownList...动态绑定,只需在DataGrid1_ItemDataBound事件中,取出数值进行匹配,便可以了,具体代码如下: 二、触发DataGrid中DropDownList事件 前台: // 取出DropDownList选中项文本int ITid = Convert.ToInt32(item.Cells[0].Text);// 取出该行第一格数据...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.1K20

    神啊:AS3中Button被disable了,也会触发Click事件

    trace("我又被点了"); btnTest.enabled = false; } 啥也不说了,看代码,然后测试:按钮(注:指SimpleButton而非组件中Button)被disable后,依然可以触发...Click事件,AS3发明者为啥要这样设计呢?...要想按钮事件仅被触发一次,正确做法只能是removeEventListener btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function...我想这或许就是Adobe与Microsoft编程哲学观不同,在Adobe看来,事件监听就应该只负责事件监听,其它任何跟我无关事情都不能影响我,即单一职责;而在Microsoft看来,各种设计之间应该相互协助...(根)显示容器中,其对应CompositionTarget.Rendering事件不会触发

    1.3K70

    WPF 窗口和控件 Unloaded 事件什么情况下不会触发

    WPF 中如果监听窗口或者控件 Unloaded 事件,那么这个事件触发吗?答案是不确定。...如果应用程序正在关闭,那么 Unloaded 时间将不会触发。WPF 通过设置在 Application 上 ShutdownMode 来决定是否在关闭窗口后关闭应用程序。...因此,如果你试图通过在 Unloaded 事件中执行清理操作,那么可能不会如预期般完成。...因此,一般情况下,Unloaded 事件是会触发,但满足如下任一情况时,此事件将不不会触发: Application.ShutdownMode="OnLastWindowClose" 且最后一个窗口关闭时...顺序 当触发 Unloaded 事件时,以上事件触发顺序为: 断点 3 断点 1 断点 2 参考资料 Unloaded event not called on Window when app closed

    42920

    jquery中动态新增元素节点无法触发事件解决办法

    在使用jquery中动态新增元素节点时会发现添加事件是无法触发,我们下面就为各位来详细介绍此问题解决办法.   ...其实最简单方法就是直接在标签中写onclick="",但是这样写其实是有点low,最好方式还是通过给类名绑定一个click事件。...解决jquery中动态新增元素节点无法触发事件问题有两种解决方法,如下: 方法一:使用live   live()函数会给被选元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行函数。...通过live()函数适用于匹配选择器的当前及未来元素。比如,通过脚本动态创建元素。...实现如下: $('.liLabel').live('click', function(){ alert('OK'); }); 方法二:使用on   可以通过on方法绑定事件,可以绑定到它父级或者

    1.7K20

    【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体操作细节 | 创建 事件监听器 对应 动态代理 | 动态代理数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )

    文章目 前言 一、创建 事件监听器 对应 动态代理 二、动态代理 数据准备 三、动态代理 调用处理程序 四、动态代理 实例对象创建 前言 Android 依赖注入核心就是通过反射获取 类 / 方法...| 监听器回调方法 ) ; 事件依赖注入比较复杂 , 涉及到动态代理 , 本博客分析 【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入代码示例 ) 事件依赖注入详细步骤 ; 本博客核心是...: 使用动态代理 , 创建 View.OnClickListener 或 View.OnLongClickListener 或 View.onTouchListener 等接口动态代理类 ; 拦截相应...onClick , onLongClick , onTouch 方法 , 执行自己方法 , 其它方法正常执行 ; 一、创建 事件监听器 对应 动态代理 ---- 为组件设置监听器可能是 View.OnClickListener...; 动态代理是作用于接口上 , 根据接口动态创建该接口子类代理对象 ; 原来是设置了一个匿名内部类 , 这个匿名内部类就是代理模式中 被代理对象 ; textView.setOnClickListener

    2.4K10

    关于一些动态创建节点无法绑定事件问题

    在我们HTML页面中有时候一些DOM元素节点(例如:一些页面加载新闻公告列表[如下图])是需要通过AJAX请求接口数据动态创建, 而当我们想在JS中想为这些节点绑定事件(如:click,hover...new_list.png 解决办法: 使用JQ提供.on()和.delegate()方法可以解决解决此问题,给动态加载元素成功绑定上事件,但是在这两种方法参数中一定得写上我们需要绑定事件那个元素选择器...这两种方法内参数 .list 就是我们动态加载出来需要绑定事件那个元素,前面的 #parent 是 .list 元素父元素。...//javascript 代码 //.list为新闻里每一条公告,是我们动态创建;#parent是一个包裹着里这一公告一个div。...//一般来说,我们绑定事件写法都是用下面的第一和第二种写法。但是这种写法是绑定不上

    1K10

    python测试开发django-167. jQuery中append() 动态新增元素 click 事件无效解决办法

    前言 使用append新增div元素,绑定click事件无效几种解决办法 遇到问题 绑定select下拉框click事件 // 绑定select下拉框click事件...}) 新增div上点击事件没监听到 主要原因是事件是在 dom 加载时候就已经完成了,新增 div 元素 click 事件就无效了。...使用live live()函数会给被选元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行函数。 通过live()函数适用于匹配选择器的当前及未来元素。...使用on 接下来还是使用on方法,把点击事件绑定到它父元素上,这样就可以了 // 绑定select下拉框click事件 $('#cards').on('click',...}) 最通用场景是click事件绑定到document上,这样就使用任何情况了 // 绑定select下拉框click事件 $(document).

    90020

    webapi(五)- 事件对象

    ('哈哈,被点击了,但是没跳转~') }) 事件委托 优点: 给父级元素 注册事件(可以提高性能) 给动态创建元素注册事件 原理: 事件冒泡,点击子元素时...无法给动态创建元素注册事件触发事件) for (let i = 0; i < ps.length; i++) { ps[i].onclick = function () { alert...) // 优点:可以提高性能,给动态创建元素注册事件 // 原理:事件冒泡 box.addEventListener('click' , function(e) {...} 事件监听注册(L2) 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) 后面注册事件不会覆盖前面注册事件(同一个事件) 可以通过第三个参数去确定是在冒泡或者捕获阶段执行...() { }) 事件名:DOMContentLoaded 当初始 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件触发,而无需等待样式表、 图像等完全加载

    1K20

    jQuery 事件注册与事件处理

    ) on可以给未来动态创建元素绑定事件            $("ol").on("click", "li", function() {                alert(11);          ...案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框内容和删除按钮, 并且添加到ul 中。 2.点击删除按钮,可以删除当前微博留言。...               li.slideDown();                $("#txt").val("");           });            // 点击删除按钮,删除留言 on可以给动态创建元素绑定事件...元素.事件()      // $("div").click();会触发元素默认行为            // 2....元素.triggerHandler("事件") 就是不会触发元素默认行为      $("input").on("focus", function() {        $(this).val("

    1.7K41

    02-老马jQuery教程-jQuery事件处理

    不会执行浏览器默认动作,也不会产生事件冒泡。 这个方法行为表现与trigger类似,但有以下三个主要区别: 第一,他不会触发浏览器默认事件。...在绑定事件之前,一定要确保页面中DOM元素已经就绪。如果没有就绪或者后面动态添加DOM元素则不会动态更新事件处理程序。 参数: type: 含有一个或多个事件类型字符串,由空格分隔多个事件。...这个方法是基本是的 .bind() 方法一个变体。使用 .bind() 时,选择器匹配元素会附加一个事件处理函数,而以后再添加元素则不会有。为此需要再使用一次 .bind() 才。...// live : 对 动态创建dom元素绑定事件。 // delegate : 事件委托绑定事件。...$('#btn').on('click', function(e) { console.log(123); }); // on 替代 live 动态创建元素绑定事件方法

    6.4K00
    领券