jQuery动态创建DOM之后，给新创建的DOM绑定事件。

系统管理员 2022-05-20 00:27 270阅读 0赞

先上两张图，说明一下将要实现的效果  
![这里写图片描述][70]  
![这里写图片描述][70 1]

根据下拉列表的选择的不同，展示不同的内容。  
刚开始我的做法是，找到dom元素，直接绑定change事件，结果什么效果没有。  
上代码。。

$("#select-type").change(function () { 
        console.log(1);
        
        if($("#select-type option:selected").text()=="选择题"){ 
            $(".filling-up").css("display","none");
        }else{ 
            $(".select-item").hide();
            $(".filling-up").css("display","table");
        }
    })；

这么写，压根儿不会打出来，因为js代码执行完了，dom还没创建呢。

后来看了陈三的博客 https://blog.zfanw.com/jquery-dynamic-insert-element-bind-event/

修正了一下

$(document).on("change", "#select-type", function () { 
       if ($("#select-type option:selected").text() == "选择题") { 
           $(".filling-up").css("display", "none");
           $(".select-item").css("display", "table-row");
       } else { 
           $(".select-item").css("display", "none");
           $(".filling-up").css("display", "table-row");
       }
    });

结果就奇迹般的实现了。感谢陈三大哥的博客，牛批！！！

[70]: /images/20220520/5a4fb4d489ca4429812ebaa731ea6a1c.png
[70 1]: /images/20220520/759b7596db8540f085575fb4b7c02dd8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery获取dom元素身上的绑定事件

转载在jQuery\\ 1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样：\\ $.data(domObj,'events');//或者$('

冷不防/ 2024年03月26日 19:30/ 0 赞/ 57 阅读

相关 JS Dom事件绑定及解绑

1.行内式在标签中直接通过on+事件类型属性去绑定事件 2.内联式（1）直接绑定匿名函数

痛定思痛。/ 2023年01月06日 04:21/ 0 赞/ 306 阅读

相关 jQuery动态绑定事件

jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8

水深无声/ 2022年09月30日 12:57/ 0 赞/ 273 阅读

相关 DOM动态创建标记实例

本文实例来源于《JavaScript DOM编程艺术（第二版）》第8章知识点可参考上一篇博客《DOM动态创建标记》，地址：[http://blog.csdn.net/ru

野性酷女/ 2022年06月07日 02:16/ 0 赞/ 196 阅读

相关 DOM动态创建标记

所谓动态创建标记，就是说向页面中添加本来没有的内容。比如下面这段简单的代码： <!doctype html> <html lang="lang"> <

Bertha 。/ 2022年06月07日 01:48/ 0 赞/ 233 阅读

相关 DOM绑定事件的三种方式

参考[事件绑定原理][Link 1] 1. 在DOM中绑定。在DOM中绑定有两种方式: 直接在html中onXxxx = "jsCode" 在html中on

旧城等待，/ 2022年05月25日 14:11/ 0 赞/ 225 阅读

相关 jQuery动态创建DOM之后，给新创建的DOM绑定事件。

先上两张图，说明一下将要实现的效果 ![这里写图片描述][70] ![这里写图片描述][70 1] 根据下拉列表的选择的不同，展示不同的内容。刚开始我的做法是，

系统管理员/ 2022年05月20日 00:27/ 0 赞/ 271 阅读

相关 DOM绑定事件处理器

一介绍 DOM提供了一种事件绑定机制，它提供的事件绑定方法是addEventListener(event, function, useCapture)，该方法三个参数 e

左手的ㄟ右手/ 2022年05月12日 00:44/ 0 赞/ 218 阅读

相关创建DOM新节点

一介绍创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素并生成文本节点，然后通过使用appendC

雨点打透心脏的1/2处/ 2022年05月12日 00:14/ 0 赞/ 239 阅读

相关 jq用on给动态添加的dom节点绑定hover事件

1. 测试用 hover 是不行的, 语法不支持 > $(selector).on(event,childSelector,data,function,map)

素颜马尾好姑娘i/ 2021年09月18日 16:24/ 0 赞/ 428 阅读