append添加元素后点击事件失效

今天发现使用append方法添加的标签,无法触发点击事件。
失效原因:append中的节点是在整个文档加载完之后开始添加,页面不会为append的元素初始化添加点击事件,故使用这种方式动态添加的节点中的click事件没有生效。
解决方法:事件委托方式解决,将指定的事件绑定在document上,只要append元素符合指定的元素,就会绑定此事件 。

$(document).on("click","指定的元素",function(){});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用`append()`方法动态添加元素并同时添加CSS样式时,需要注意以下几点: 1. 确保添加的CSS样式的选择器与现有的样式不冲突; 2. 确保CSS样式在元素添加到DOM树之后才定义,否则新添加的元素不会应用这些样式; 3. 如果需要在添加元素后立即应用CSS样式,可以使用`setTimeout()`方法或者异步加载样式表的方式。 下面是一个示例代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; p.style.color = 'red'; // 添加CSS样式 document.getElementById('container').append(p); </script> ``` 在上面的代码中,我们使用`createElement()`方法创建一个新的段落元素,并为其添加了样式`color: red`。由于样式是在元素添加到DOM树之前定义的,因此新添加的元素会应用这些样式。如果需要异步加载样式表,可以使用以下代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; document.getElementById('container').append(p); // 异步加载样式表 var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'path/to/styles.css'; document.head.append(link); </script> ``` 在上面的代码中,我们先添加了一个新的段落元素,然后使用`createElement()`方法创建一个`link`元素,并设置其`rel`属性为`stylesheet`,`href`属性为样式表的路径。最后,将`link`元素添加到`head`元素中,样式表会异步加载并应用到新添加的元素上。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值