简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

如何操作JS给动态元素增加事件

php中世界最好的语言
Libérer： 2018-06-14 14:49:02
original
1979 人浏览过

这次给大家带来如何操作JS给动态元素增加事件，如操作JS给动态元素增加事件的注意事项有哪些，下面就是实战案例，一起来看一下。

我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通：




 
 js动态添加事件




 
    
  
  • 123
    • 
  
  • 123
    • 
  
  • 123
    • 
 

 
 
Copier après la connexion

运行效果：

比如这样，通过for循环给li添加的事件无法绑定到新增的li上边，详细的原因这里不做解释。那么这个如何解决呢，其实办法也简单，就是通过事件委托的方式去解决，直接上代码，上面的代码简单改造：




 
 www.jb51.net js动态添加事件




 
    
  
  • 123
    • 
  
  • 123
    • 
  
  • 123
    • 
 

 
 
Copier après la connexion

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

实战项目中如何使用jquery filter()

nodejs+server.js创建 Web 服务器

以上是如何操作JS给动态元素增加事件的详细内容。更多信息请关注PHP中文网其他相关文章！

Étiquettes associées：
js 事件 事件委托 元素 动态添加
source：php.cn
Article précédent：如何利用Vue实现图片轮播 Article suivant：如何操作JS遍历多维数组
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment utiliser la balise primitive ouverte dans Next JS 13 ? Dans la récente mise à jour NextJS13, ils ont introduit une nouvelle façon de gérer les ba...
Depuis 2023-11-10 23:03:51
0
1
527
Livewire non défini J'ai du mal à déployer mon projet LaravelLivewire sur le serveur. Le problème est que le f...
Depuis 2023-11-09 15:34:23
0
1
233
Vue js : Dépannage - Lecture de la propriété '$refs' de undefined Obtention de l'erreur Impossible de lire la propriété non définie (lecture de '$refs') mêm...
Depuis 2023-11-07 23:34:12
0
1
305
Étapes pour installer jQuery dans Nuxt.js Bien que j'essaie d'ajouter jQuery dans mon projet, j'obtiens une erreur indiquant qu'il n...
Depuis 2023-11-06 16:41:50
0
1
225
Comportement inattendu (bug du bouton blanc) lors de l'utilisation de Tailwind et MUI dans le projet NextJS Je construis actuellement un projet en utilisant NextJS, TailwindCSS et la bibliothèque MU...
Depuis 2023-11-04 11:04:23
0
1
178
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！