js追加的元素,点击事件处理

html页面代码1


html代码2


页面效果1-未点击“添加图文”


页面效果2-点击两次“添加图文”


js代码-点击“添加图文”的事件处理
js代码-点击“删除图文”的事件


页面效果3-点击“图文2”中的“删除该图文”效果

为了方便对比,点击了两次“添加图文”,并在每个图文内容里面的“图文详情链接”的输入框中填写了相对应的数字,这里需要注意的是,用js追加元素,点击事件是获取不到用js追加的内容的,查了好多资料,也试过好多方法,最后测试后发现这种方法是可行的。比如每个图文里面都有封面图,封面图那里有个长方形的框框,这个框框是点击“选择图片”按钮后选择了本地电脑的图片后,显示本地图片的路径的,因为这是js追加的元素,需要分两步进行。


“选择图片”左边的框框的事件如上图的最后一个方法

第一步,跟平时一样,直接用事件处理即可,这里处理的是原本页面就有的上传图片的,js追加的元素用不了

第二步,在js追加元素的代码里加上第一步的方法,这样才能用,如下图


在js追加元素的代码里加上第一步的方法,这样才能用

点击“删除该图文”时,直接用click触发事件,直接儿子找爷爷,再由爷爷干掉老爸是行不通的,即

var idVal = $(this).attr('idVal');

$(this).parents('.contents').find('#son_'+idVal).remove();

这样是找不到这个元素的老爸的,打印出来是空的

要先找到这个元素的老爸,然后在通过老爸找老爸的老爸,一层层找父类才找得到


js代码-找到该元素的父类,再通过父类找其父类,然后删除
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,738评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,164评论 24 450
  • 都说世界上有一位最善良,最伟大的女性,她就是我们的母亲。接下来让我们走进我和母亲的问答。 问:您心目中的我是...
    2e45075fd084阅读 3,532评论 0 0
  • 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥...
    mervynyang阅读 4,707评论 0 4