动态生成的DOM元素中的JS方法不执行-CSDN论坛

动态生成的DOM元素中的JS方法不执行

Web 开发 > JavaScript

收藏回复

[问题点数：50分，结帖人yaotomo]

⋅winform怎么实现这样的效果 ⋅winform如何实现如图效果 ⋅正则式提取字符串 更多帖子 关注私信空间博客 yaotomo 等级 本版专家分：2009 结帖率 99.2%

下拉选择地区之后，加载省下拉框，选择省后，加载市下拉框
这里的下拉框是ul，li结构
地区的下拉框



<div class="am-dropdown" id="divRegion" data-am-dropdown="">

<button class="am-btn am-dropdown-toggle" id="btnRegion" style="background-color:#fff" data-am-dropdown-toggle="">选择地区<span class="am-icon-caret-down"></span></button>

  <ul class="am-dropdown-content" id="ulRegion">

<li nodeid="137697"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;东北&quot;)">东北</a></li>

<li nodeid="137698"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华北&quot;)">华北</a></li>

<li nodeid="137699"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;西北&quot;)">西北</a></li>

<li nodeid="137700"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华东&quot;)">华东</a></li>

<li nodeid="137701"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华中&quot;)">华中</a></li>

<li nodeid="137702"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华南&quot;)">华南</a></li>

<li nodeid="137703"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;西南&quot;)">西南</a></li>

</ul>

</div>

为每个地区的li添加click事件，点击append出省的下拉框



<div class="am-dropdown" id="divRegion" data-am-dropdown="">

<button class="am-btn am-dropdown-toggle" id="btnRegion" style="background-color:#fff" data-am-dropdown-toggle="">东北</button>

  <ul class="am-dropdown-content" id="ulRegion">

<li nodeid="137697"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;东北&quot;)">东北</a></li>

<li nodeid="137698"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华北&quot;)">华北</a></li>

<li nodeid="137699"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;西北&quot;)">西北</a></li>

<li nodeid="137700"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华东&quot;)">华东</a></li>

<li nodeid="137701"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华中&quot;)">华中</a></li>

<li nodeid="137702"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;华南&quot;)">华南</a></li>

<li nodeid="137703"><a href="javascript:;" onclick="setSelectedValue(&quot;btnRegion&quot;,&quot;西南&quot;)">西南</a></li>

</ul>

</div>

<span> > </span>

<div class="am-dropdown" id="divProvince" data-am-dropdown="">

<button class="am-btn am-dropdown-toggle" id="btnProvince" style="background-color:#fff" data-am-dropdown-toggle="">选择省<span class="am-icon-caret-down"></span></button>

<ul class="am-dropdown-content" id="ulProvince">

<li nodeid="133596"><a href="javascript:;" onclick="setSelectedValue(&quot;btnProvince&quot;,&quot;辽宁省&quot;)">辽宁省</a></li>

<li nodeid="133597"><a href="javascript:;" onclick="setSelectedValue(&quot;btnProvince&quot;,&quot;吉林省&quot;)">吉林省</a></li>

<li nodeid="133598"><a href="javascript:;" onclick="setSelectedValue(&quot;btnProvince&quot;,&quot;黑龙江省&quot;)">黑龙江省</a></li>

</ul>

</div>

生成省下拉的代码后，其中的setSelectedValue方法失效了，console控制台没有报错。
我将自动生成的代码粘贴到网页上单独执行是没有问题的
这是怎么回事？

2018-08-17 08:33:52

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅70万征下联，我猿界大湿何在？？ ⋅【400分】什么情况，疯狂删帖。。。。。。 ⋅【100分】sequelize嵌套includ的bug，有人遇到过吗？请专家解惑 更多帖子 关注私信空间博客 丰云 等级 本版专家分：5021 勋章 领英绑定领英第三方账户获取 红花 2019年2月 Web 开发大版内专家分月排行榜第一 黄花 2018年8月 Web 开发大版内专家分月排行榜第二: href="javascript:#"
或者
href="javascript:setSelectedValue('btnProvince','辽宁省');"
删掉onclick事件

2018-08-17 09:11:52

点赞只看TA 引用举报 #1得分 20

⋅70万征下联，我猿界大湿何在？？ ⋅【400分】什么情况，疯狂删帖。。。。。。 ⋅【100分】sequelize嵌套includ的bug，有人遇到过吗？请专家解惑 更多帖子 关注私信空间博客 丰云 等级 本版专家分：5021 勋章 领英绑定领英第三方账户获取 红花 2019年2月 Web 开发大版内专家分月排行榜第一 黄花 2018年8月 Web 开发大版内专家分月排行榜第二: "不要滥用，
必要时用 ‘\’来转义

2018-08-17 09:13:02

点赞只看TA 引用举报 #2得分 0

⋅winform怎么实现这样的效果 ⋅winform如何实现如图效果 ⋅正则式提取字符串 更多帖子 关注私信空间博客 yaotomo 等级 本版专家分：2009: 引用 1 楼 foren_whb 的回复:
href="javascript:#"
或者
href="javascript:setSelectedValue('btnProvince','辽宁省');"
删掉onclick事件

本来用的href="javascript:setSelectedValue('btnProvince','辽宁省')"
不行才换成了onclick
另外把javascript:;改成javascript:# 也不行

2018-08-17 09:37:34

点赞只看TA 引用举报 #3得分 0

⋅70万征下联，我猿界大湿何在？？ ⋅【400分】什么情况，疯狂删帖。。。。。。 ⋅【100分】sequelize嵌套includ的bug，有人遇到过吗？请专家解惑 更多帖子 关注私信空间博客 丰云 等级 本版专家分：5021 勋章 领英绑定领英第三方账户获取 红花 2019年2月 Web 开发大版内专家分月排行榜第一 黄花 2018年8月 Web 开发大版内专家分月排行榜第二: 引用 1 楼 foren_whb 的回复:
href="javascript:#"
或者
href="javascript:setSelectedValue('btnProvince','辽宁省');"
删掉onclick事件

错了，
href="#"

2018-08-17 13:33:43

点赞只看TA 引用举报 #4得分 0

⋅winform怎么实现这样的效果 ⋅winform如何实现如图效果 ⋅正则式提取字符串 更多帖子 关注私信空间博客 yaotomo 等级 本版专家分：2009: 引用 4 楼 foren_whb 的回复:
Quote: 引用 1 楼 foren_whb 的回复:

href="javascript:#"
或者
href="javascript:setSelectedValue('btnProvince','辽宁省');"
删掉onclick事件

错了，
href="#"

试过不行的

2018-08-17 13:50:47

点赞只看TA 引用举报 #5得分 0

⋅js关于display:none前后后的点击问题 ⋅js参数问题 更多帖子 关注私信空间博客 漠子凉 等级 本版专家分：920



    //jq写法

    $(document).on("click", ".am-dropdown-content li", function() {

        setSelectedValue("&quot;btnRegion&quot;,&quot;东北&quot;")

    });

2018-08-17 14:02:41

点赞只看TA 引用举报 #6得分 0

⋅eclipse svn 图标含义

更多帖子

关注私信空间博客

我是老孙

等级

本版专家分：75

勋章

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！: jquery 动态生成的用on 不大行，得重新绑定事件，onbind ，版本高的可能没有了，用$.parse重新解析一下动态生成的那段html

2018-08-17 17:33:59

点赞只看TA 引用举报 #7得分 30

⋅winform怎么实现这样的效果 ⋅winform如何实现如图效果 ⋅正则式提取字符串 更多帖子 关注私信空间博客 yaotomo 等级 本版专家分：2009

引用 6 楼 sinat_34353062 的回复:



    //jq写法

    $(document).on("click", ".am-dropdown-content li", function() {

        setSelectedValue("&quot;btnRegion&quot;,&quot;东北&quot;")

    });

还是不行呢

2018-08-17 21:10:15

点赞只看TA 引用举报 #8得分 0

⋅winform怎么实现这样的效果 ⋅winform如何实现如图效果 ⋅正则式提取字符串 更多帖子 关注私信空间博客 yaotomo 等级 本版专家分：2009: 引用 7 楼 sunjiyun26 的回复:
jquery 动态生成的用on 不大行，得重新绑定事件，onbind ，版本高的可能没有了，用$.parse重新解析一下动态生成的那段html

请教具体应该怎么做？

2018-08-17 21:10:57

点赞只看TA 引用举报 #9得分 0

⋅winform怎么实现这样的效果 ⋅winform如何实现如图效果 ⋅正则式提取字符串 更多帖子 关注私信空间博客 yaotomo 等级 本版专家分：2009: 自己用其他方法实现了，谢谢各位老师

2018-08-20 16:19:05

点赞只看TA 引用举报 #10得分 0

1 2

收起

收藏回复

yaotomo

等级：

关注私信 TA的帖子

关于动态生成dom绑定事件失效的原因及解决和live(): （1）bind事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了（2）同样，当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是...

js动态生成的DOM绑定事件失效的问题: 事件委托原理：事件冒泡机制。优点：1....比如ul 上代理所有li 的click 事件。...初学者会可能会遇到在js 动态生成的DOM元素中直接绑定事件，事件没有生效的问题。因为网页只执行一次初始化绑定，...

动态生成的DOM做点击事件无效: 最近写项目的时候遇到了这种情况，页面中的html标签都是从后台获取的数据，然后利用JS添加到页面上，当再对生成的标签写点击事件（click）时没有效果。项目时这样的，首先从后台接收到数据然后通过递归动态生成标签...

无法获得动态生成的DOM元素: $(function(.....))是表示当网页加载完成后，此函数中的js内容才会执行。...网页原本的dom元素已经加载完成了，我现在动态生成了一个DOM元素，但在$(function(.....))无法获得刚生成的DOM元素。请问大家是怎么做的？

认识DOM和DOM加载过程以及如何让DOM加载完成后再执行js脚本文件: DOM，众所周知是文档对象模型。这其中文档是什么呢？对象模型是什么？针对的对象是哪些？其实可以把网页看做是一种文档，而且是有结构的文档。...当然，要搞清楚具体怎么获取的，我们不得不认识下一DOM中的M

动态添加dom元素，并绑定VUE事件: VUE动态添加dom元素并绑定事件当我有这个需求的时候，去网上搜索了很久，都没找到通俗易懂的指导，后面还是...中动态生成可用时间块&amp;amp;amp;amp;amp;amp;amp;lt;td&amp;amp;amp;amp;amp;amp;am

jquery动态生成的元素自动执行一次click事件: $(document).ready(function(){ $(".d").live("click",function(){ alert("自动点击链接被点击！"); }); $("#x").append(...");; $(".d").click(); });注意使用live绑定，动态生成的对象生成之后再执行click

JQuery动态生成的dom绑定事件: 需要实现一个功能，每一天文件列表下对应不同的文件，我要为这些动态生成的文件绑定相应的事件。记录一下解决相应过程。待处理的HTML: div class="col-sm-9" id="filelist"> video controls="" width="320...

DOM 树是如何构建的？: 今天通过对 DOM 模型、HTML 解释器和 JavaScript 的执行的介绍，来初步学习 HTML 解释器是如何将从网络或者本地文件获取的字节流转成 DOM 树的。 DOM 模型 1、DOM 标准 DOM (Document Object Model) 的全称是...

如何在DOM元素加载完毕后执行js代码以及DOM加载过程: 最近在写一个动态菜单。...但是存在一个问题，就是菜单功能的js代码会在DOM元素加载完成之前执行，也就是菜单生成之前执行，所以所有绑定的菜单点击事件都不能执行。认识DOM和DOM加载过程以及如何让DOM加载完...

关于jquery 的绑定事件on 如何绑定动态生成的dom元素: 今天遇到个问题，在table里面动态更新数据，然后每一行会绑定相应的点击事件 ...这段代码在页面加载时的表格中是起作用的，但是当ajax动态更新表格数据之后就不起作用了，原因是jq读到这段代码时，浏览器还没更

如何在React中使用数据动态生成DOM标签: 在我们的产品中有很多需要点击或者回调函数执行时 生成DOM 标签我称之为...但是在React中我们尽量少的使用JQ 理解组件化的概念，那我们怎么利用它本身的某些API和方法来实现我们动态生成DOM的需求呢我们知道Rea

JS获取动态添加的元素: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: // 1. 在模板引擎里面添加行内事件 // 2. 利用事件的委托获取(常用) // 3. 在ajax的...

使用ajax动态加载html元素时，onclick事件失效: 原因：ajax动态加载之前js就加载完了，事件没有绑定到动态生成的dom元素上。问题：使用on事件，$('#btn').click(function(){})绑定无效解决方案：使用on绑定事件。$(document).on('click','#btn',function(){})...

关于DOM型XSS漏洞的学习笔记: DOM，全称Document Object Model，是一个平台和语言都中立...在网站页面中有许多页面的元素，当页面到达浏览器时浏览器会为页面创建一个顶级的Document object文档对象，接着生成各个子文档对象，每个页面元素对应一个

04——javascript Dom 动态创建元素操作样式: ——采自传智播客的教学笔记(手打难免有错)

前端必会！四步带你吃透浏览器渲染基本原理: 作者 |SHERlocked93 ...前端的用户体验给了前端直观的印象，因此对B/S架构的开发人员来说，熟悉浏览器的内部执行原理显得尤为重要。浏览器主要组成与浏览器线程 1.1 浏览器组件浏览器大体上由...

jQuery获取动态生成的元素: 需求描述：页面上可以动态添加数据,比如table,点击按钮...如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live方法 $(".button").live("click",function(){ console.info($("#mytd").html()); })

js如何获取触发js事件的DOM: 如何获取触发js事件的DOM节点

JS生成DOM元素点击事件不生效和点击事件禁止冒泡处理方式: $(document).on('click','.del-sub-procedure',function(e){ e.stopPropagation(); //禁止事件冒泡 ...//禁止冒泡方法 function stopPropagation(e) { e = e || window.event; if(e.stopPr

（python解析js）selenium结合phantomjs抓取js生成的页面: 有些网页是在加载时动态创建HTML内容，只要在js代码完全执行完后才会显示最终结果。如果用传统的方法抓取页面，就只能获得js代码执行之前页面上的内容。要解决这个问题有两种方法： 1.直接从js代码中抓取数据（执行...

浏览器渲染引擎: 浏览器渲染引擎主要模块一个渲染引擎主要包括：...CSS解析器：级联样式表的解析器，它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施 Javascript引擎：使用Javascript代码可以修改网页的内容...

高频dom操作和页面性能优化探索（转）: 访问和修改DOM元素 修改DOM元素的样式，导致重绘或重排通过对DOM元素的事件处理，完成与用户的交互功能 DOM的修改会导致重绘和重排。重绘是指一些样式的修改，元素的位置和大小都没有改变；重排是指元素的...

浏览器渲染原理&&重绘和回流: 产物是DOM（文档对象模型），如果有css，会根据css生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合并产生渲染树，有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，...

怎么获取JQuery动态生成的元素的值?: 我用jquery动态创建了一个li标签后，老是获取不到他的id或者class，代码如下 $("ul").append("名称"); 然后通过 $(".name").click(function () { alert("获取到append后的节点"); }) 但不幸的是这样是不能获取...

浏览器解析网页的过程: 参考文献参考文献

vue.js中获取原生的dom对象: 获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li element = document.querySelector(selectors)//获取dom元素中的第一个元素在vu...

js给动态生成元素绑定事件之事件委托方法on、live、delegate: 什么是事件委托？...应用场景：js动态生成的dom元素，无法直接操作，需要使用事件委托绑定方法。语法结构：例如父id = “aaa”. 动态生成的span,需要绑定事件 $("#aaa").on('cli...

vue.nextTick()方法的使用详解（简单明了）: 什么是Vue.nextTick()？...所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更...

vue源码分析：渲染篇: Vue.js框架是目前比较火的MVVM框架之一，简单易上手的学习曲线，友好的官方文档，配套的构建工具，让Vue.js在2016大放异彩，大有赶超React之势。前不久Vue.js 2.0正式版已出，在体积优化（相比1.0减少了50%）、性能...

相关热词 c#读取shp文件 c# 多个if c#上传图片到安卓的接口 c#中得到控件 c# 浏览器打开调用 c# 绘制3维 c#酒店管理系统数据库 c#链接api c# 串口发送数据 c# 线程结束回调