js动态插入的元素点击无效

当点击按钮1时为元素b动态添加类discounted,并对具有类discounted的元素b进行点击事件

 $(".btn1").click(function(){
      $(".b").addClass("discounted");

  }); 
$(".b.discounted").on("click",function(){
        alert("1111");
})

以前以为动态插入的元素直接用on便可以进行操作,但今天试了很多次都没成功

看到网上说当动态生成元素的同时也动态生成事件过程,而不是先生成一个子虚乌有的事件来等着元素对号入座。

觉得很有道理

因为当程序第一次运行到

$(".b.discounted").on("click",function(){
        alert("1111");
})时找不到对象,程序就会判定为出错,那个这个事件代码就无效了。

修改代码为

 $(".btn1").click(function(){
      $(".b").addClass("discounted");
      $(".b.discounted").on("click",function(){
        alert("1111");
      })
  }); 

就ok了

				
时间: 2024-12-14 09:16:41

js动态插入的元素点击无效的相关文章

VUE 点击事件(父子层级元素点击时踩坑记录)

<ul> <li @click="fatherClick"> <div @click.stop="childClick"> </div> </li> </ul> var vm_target = new Vue({ el: '#vm_target', data: { }, methods:{ /**父元素点击事件**/ fatherClick:function(event){ var el1 =

JS动态插入内容到DIV

html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

appium js代码写的H5寻找元素点击方法

java写发 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; min-height: 15.0px } span.s1 { color: #931a68 } span.s2 { color: #7e504f } span.Apple-tab-span { white-space: pre } publ

jquery on()绑定的点击事件在js动态新添加的元素上无效

js生成的元素绑定事件必须使用live,但新版的jq,已经淘汰了live,可以用on方法代替,但必须注意写法. $('.class').on("click",function(){--});相当于$('.class').bind("click",function(){--});$(document).on("click",'.class',function(){--});相当于$('.class').live("click",

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer} .divchild{position: absolute;margin:

原创:微信小程序bindtap绑定html元素点击事件

什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> JS文件代码: Page({ data:{ ... }, onload:function(){ ... }, tapName: f

jQuery移除或禁用html元素点击事件常用方法小结

移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法 方法一 $(this).click(function (event) { event.preventDefault(); } 方法二 $('a').live('click', function(event) { alert("抱歉,已停用!"); event.preventDefault();

从一个ListBox中的元素点击买入另一个ListBox元素中

先看效果图: Blend中制作过程如下: 1.在数据板中新建示例数据,如下图 2.弹出对话框点击确定性 3.这是数据板中出现Collection集合,把集合下的Property1改成Name 4.在对象和时间线窗口选中Grid,左健点中上图中的Name属性拖拽到Blend中间的画板上,会自动创建ListBox,把ListBox放在画板左侧,如下图: 5.再在画板右侧创建一个空的ListBox 6.如果上面步骤没有问题,代码中应该是下图这样的 7.对左侧listBox添加双击事件,双击后listB

赋予option元素点击事件后,点击select时却触发了option事件。如何解决?

将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name="ss"> <option>请选择</option> <foreach name='sf' item='f'> <option jibie="{$f.level}" value="{$f.name}" in