on() 和 click() 的區別
阿新 • • 發佈：2018-05-18
行為 append ron 點擊 head 方式 綁定 ren 2.4
on() 和 click() 的區別:
二者在綁定靜態控件時沒有區別，但是如果面對動態產生的控件，只有 on() 能成功的綁定到動態控件中。
以下實例中原先的 HTML 元素點擊其身後的 Delete 按鈕就會被刪除。而動態添加的 HTML 元素，使用 click() 這種寫法，點擊 Delete 按鈕無法刪除；使用 On() 方式可以。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script> $("#newclick").click(function(){ $(".li").append(‘<li>動態添加的HTML元素click<button class="deleteclick">Delete</button></li>‘); }); $("#newon").click(function(){ $(".li").append(‘<li>動態添加的HTML元素on<button class="deleteon">Delete</button></li>‘); }); $(".delete").click(function(){ $(this).parent().remove(); }); $(".li").on(‘click‘, ".deleteon", function(){ $(this).parent().remove(); }) $(".deleteclick").click(function(){ $(this).parent().remove(); }); </script> </head> <body> <h1>展示jQuery中on()和click()的區別</h1> <p> <span>點擊生成新按鈕。NewOn生成的Delete按鈕行為用on()實現，NewClick生成的Delete按鈕行為用click()實現。</span> </p> <div class="test"> <button class="new" id="newon">NewOn</button> <button class="new" id="newclick">NewClick</button> <ul class="li"> <li>原先的HTML元素on<button class="deleteon">Delete</button></li> <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> </ul> </div> </body> </html>
on() 和 click() 的區別