溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
了解jquery中on()與click()有哪些區別？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
區別：click()屬于靜態加載，當頁面加載完，就不在為新增加的元素添加點擊事件；而on()屬于動態加載，當頁面加載完，可以為新增加的元素添加事件，但是必須選定父級元素。
jquery中on()與click()的區別
click()屬于靜態加載，當頁面加載完，就不在為新增加的元素添加點擊事件。
on()屬于動態加載，當頁面加載完，可以為新增加的元素添加事件，但是必須選定父級元素。
二者在綁定靜態控件時沒有區別，但是如果面對動態產生的控件，只有 on() 能成功的綁定到動態控件中。
以下實例中原先的 HTML 元素點擊其身后的 Delete 按鈕就會被刪除。而動態添加的 HTML 元素，使用 click() 這種寫法，點擊 Delete 按鈕無法刪除；使用 On() 方式可以。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> </head> <body> <h2>展示jQuery中on()和click()的區別</h2> <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> <script type="text/javascript"> $("#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> </html>
感謝各位的閱讀！看完上述內容，你們對jquery中on()與click()有哪些區別大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
