动态添加元素没有事件

最新推荐文章于 2021-05-31 01:59:59 发布
最新推荐文章于 2021-05-31 01:59:59 发布
阅读量212 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33239420/article/details/106314995
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
	<script>
		$(function(){
			function bb(){
				console.log(88888)
			}
			$('body').on('click','.submit',function(){
				bb()
			})
		})
	</script>
</head>
<body>
	<div class="btnbox">
		<span onclick="aa(this)">开始</span>
	</div>
	<script>
		function aa(_this){
			//直接用html()覆盖标签中的内容会影响动态元素的事件
			//$('.btnbox').html('<span>等待....</span>');//影响动态元素的事件

			//用append()不会影响点击事件,但如果用empty()方法删除子元素还是会影响后续添加的元素的事件
			// $('.btnbox').empty()//影响动态元素点击事件
			$('.btnbox span').css('display','none')//不影响
			
			$('.btnbox').append('<span>等待....</span>');//不影响

			setTimeout(function(){
				$('.btnbox').html('<span onclick="aa(this)"><b>选择</b></span>')//不影响
				$('.btnbox span').addClass('submit')
				console.log(6666)
			},600)
		}
	</script>
</body>
</html>

 

qq_33239420
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态增加的元素无事件处理 -- Jquery解决方案
weixin_39651356的博客
11-05 160
文章目录解决方案1解决方案2解决方案3 背景：按button新增加的DIv元素并没有点击div会变背景色的事件 <head> <style> div { background:red; width: 40px; height: 40px; ...
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
nzz_1214
10-21 915
比如做一个ajax读取留言列表的时候，每条留言后面有个回复按钮，class为“reply”,如果你用的是$(".reply").click(function(){ //do something... })，想必后面通过ajax加载进来的列表中的回复按钮，点击事件会失效。 其实最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事件。 解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法，如下： 为了达到更好的演示效
js动态生成的元素，添加事件没有效果
Owen的博客
03-18 573
问题：动态生成的input元素change事件、元素的click事件…没有效果 解决方案：delegate() delegate()事件处理程序适用于当前或未来的元素（js创建的新元素） $("div").delegate("button","click",function(){ $("p").slideToggle(); }); 语法： $(selector)....
js 新追加的元素点击事件没触发
qq_44647223的博客
12-15 1041
常见情况： 监听html中某个类的元素的点击事件，当新追加同一个类的元素时，点击新追加的元素没有反应。 例如： <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .divs{ height: 100px; width: 100px; background-color: red; margin: 20px;
html追加元素没有点击事件,js 新追加的元素点击事件没触发
weixin_35245427的博客
05-31 633
常见情况：监听html中某个类的元素的点击事件，当新追加同一个类的元素时，点击新追加的元素没有反应。例如：Testtitle>.divs{height:100px;width:100px;background-color:red;margin:20px;}style>head>div>div>script>varstr='';$('.divs').on(...
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
10-18
以下是一个基于事件委托实现动态添加元素事件功能的示例： ```html <!DOCTYPE html> <title>JS动态添加事件 <li class="out-li">123 <li class="out-li">123 <li class="out-li">123 添加 var ...
解决layui动态添加的元素click等事件触发不了的问题
12-13
在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert&#40...
JavaScript动态添加事件之事件委托
11-23
如果没有事件委托，你需要为每个新添加的列表项单独添加事件监听器，这不仅代码繁琐，而且效率低下。 事件委托解决了这个问题。通过将事件监听器绑定到列表容器（如`<ul>`），而不是每个`<li>`元素，我们可以捕获到...
jQuery动态添加元素无法触发绑定事件的解决方法分析
10-18
本文主要讨论了两种解决jQuery动态添加元素无法触发绑定事件的方法： 1. 使用`live`方法（已废弃）： 在jQuery 1.9之前的版本，`live`方法是处理动态元素事件的一个有效途径。`live`方法允许事件处理程序被附加到...
js动态添加元素为何 点击事件无效
胡世林的博客
10-29 4052
本来觉得不用提的，但是发现最近几个朋友在提，而且新来的小兄弟也有点迷糊这个，所以就简单说说， 看看下面的代码： .a {width: 100px;height: 100px; background: #000;margin: 10px; } 展示 增加 function showbtn(){ al
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
11-29
遇到 jquery无法为动态生成的元素添加点击事件，谷歌一下，整理一下解决方法如下： （中间的元素是动态生成的）， 现在想为添加点击事件， 例子如下： 这是元素内容 //i是动态生成 解决方法如下： $[removed]('click', '.icon', function(e) { alert('i添加点击事件成功'); }); 以上就是小编为大家带来的jqu
解决js中新增加的标签无法触发事件的问题
wagg1993323的博客
02-28 1249
今天在写js的时候吗，发现我在JS中新增加的标签，无法触发click事件，通过各种找资料的途径，最后解决了这个问题。$(document).on('click', '.file_remove', function(){ $(this).parent(".uploader_file").remove(); }); 下面是对这个问题的解释
动态添加DOM节点后无法绑定事件解决方法
weixin_44692699的博客
12-09 587
参考了这两个网址 解决的方法： 通过事件委托完成 https://www.cnblogs.com/tenfly/p/11443275.html https://blog.csdn.net/a_csdner/article/details/76164986 //向div 标签中 克隆并追加id为test 的节点， // 同时追加一个class属性 abc $('div').append($('#test').clone().addClass('abc')); // 当需要动态操作添加后的属性 // d
动态生成的DOM做点击事件无效
mm_hello11的博客
01-09 9235
最近写项目的时候遇到了这种情况，页面中的html标签都是从后台获取的数据，然后利用JS添加到页面上，当再对生成的标签写点击事件（click）时没有效果。项目时这样的，首先从后台接收到数据然后通过递归动态生成标签，代码如下：var showTree = function(a,b){ if(a.nodes.length <= 0) return ''
js动态生成的元素无法触发插件的监听事件解决办法
weixin_42935688的博客
09-29 1155
一般插件绑定元素的写法 $('.dtOver').datePicker({}) 动态生成的元素绑定的写法 $('.dtOver').on('focus',function(){ $(this).datePicker({}); }) 这里jquery$.on(’’)提供了对动态生dom元素的解决办法 ...
vue动态添加click事件
最新发布
08-29
在Vue中，可以通过使用指令来动态添加click事件。一个常用的指令是v-on，它可以用于监听DOM事件并触发相应的方法。为了实现动态添加click事件，在Vue中可以使用一个变量来判断是否需要添加或者去掉事件。例如，假设有一个变量clickFlag用于标识是否需要添加click事件： ``` <template> <div> <button v-if="clickFlag" v-on:click="handleClick">点击事件</button> <button v-else>没有事件</button> </div> </template> <script> export default { data() { return { clickFlag: true } }, methods: { handleClick() { // 点击事件的逻辑处理 } } } </script> ``` 在上述代码中，通过v-if指令和clickFlag判断是否显示具有click事件的按钮。当clickFlag为true时，按钮将显示，并绑定了handleClick方法作为click事件的处理函数；当clickFlag为false时，显示另外一个没有事件的按钮。这样就实现了动态添加click事件的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue中如何给动态生成的元素绑定点击事件](https://blog.csdn.net/xzg199153/article/details/122730073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue根据条件添加click事件的方式](https://download.csdn.net/download/weixin_38552871/13982249)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值