解决append的div的事件失效问题
生活随笔
收集整理的這篇文章主要介紹了
解决append的div的事件失效问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原來div里有一個關閉按鈕，點擊后可以把該div刪除掉。
現在新增一個按鈕，點擊這個按鈕就可以動態添加和原來的div相同的div。
實現點擊新添加的div里的按鈕，也想要實現刪除該按鈕所在的div。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>測試</title><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="old"><button class='newbtn'>按鈕1</button></div><div class="old"><button class='newbtn'>按鈕2</button></div><button id="adddiv">添加div</button><button id="btn">清空div</button><script type="text/javascript">//點擊清空的時候刪除所有div$("#btn").click(function(){$("div").remove();})//點擊添加的時候增添div$("#adddiv").click(function(){var newdiv = "<div class='old'><button class='newbtn'>新的按鈕</button></div>";$("body").append(newdiv);})//點擊按鈕則刪除按鈕所在的div$(".newbtn").click(function(){$(this).parent().remove();})</script></body> </html>根據預想寫出了如上代碼，然而測試的時候才發現，看似完美的代碼，根本不能實現預期效果。
解決方案：把倒數第九行改為：
var newdiv = "<div class='old'><button class='newbtn' onclick='$(this).parent().remove()'>新的按鈕</button></div>";于是效果就出來了。這是躺過坑的小伙伴告訴我的方法，雖然問題解決了，但是我還是不明白自己的代碼為什么沒有達到預期效果，希望大家幫忙看看，歡迎指點！
總結
以上是生活随笔為你收集整理的解决append的div的事件失效问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 根据类名遍历数组的三种方法
- 下一篇： 机器学习库一：scikit-learn