如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素添加點(diǎn)擊事件
原生JavaScript
第一：onclick
<body><button onclick="AddJob()">添加工作經(jīng)歷</button><button onclick="GetJobs()">獲取全部工作</button><div id="joblist"><div id="job1" class="job"><input name="CompanyName" type="text" value="公司1" /><button onclick="DelJob(1)">刪除</button></div></div><script type="text/JavaScript">//添加工作經(jīng)歷function AddJob() {var timestamp = parseInt((new Date()).valueOf()); //唯一的標(biāo)識(shí)console.log(parseInt((new Date()).valueOf()));document.getElementById("joblist").innerhtml +=`<div id="job` + timestamp + `" class="job"><input name="CompanyName" type="text" value="公司` + timestamp + `" /><button onclick="DelJob(` + timestamp + `)">刪除</button></div>`;}//刪除工作經(jīng)歷function DelJob(timestamp) {document.getElementById("job" + timestamp).remove();}//獲取全部工作經(jīng)歷function GetJobs() {var jobs = document.getElementsByClassName("job");var arr = [];for (var i = 0; i < jobs.length; i++) {var job = jobs[i];var companyName = job.children[0].value;arr.push(companyName);}console.log(arr);alert(arr);}</script></body>
第二種addEventListener：
document.getElementById('joblist').addEventListener('click', function (ev) {var target = ev.target || ev.srcElement;if (target.nodeName.toLowerCase() == 'button') {var e = document.getElementById(target.parentNode.id);document.getElementById("joblist").removeChild(e);}});
jquery實(shí)現(xiàn)
從 jQuery 1.7 開始，您應(yīng)該使用on的方式，語(yǔ)法如下：
$(staticAncestors).on(eventName, dynamicChild, function() {});
解釋：
這稱為事件委托，其工作原理如下。該事件附加到staticAncestors應(yīng)處理的元素的靜態(tài)父級(jí) ( )。
每次在此元素或后代元素之一上觸發(fā)事件時(shí)，都會(huì)觸發(fā)此 jQuery 處理程序。
然后處理程序檢查觸發(fā)事件的元素是否與您的選擇器 ( dynamicChild)匹配。當(dāng)匹配時(shí)，您的自定義處理程序函數(shù)將被執(zhí)行。
在此之前，推薦的方法是使用live()：
$(selector).live( eventName, function(){} );
然而，live()在 1.7 中被棄用on()，而在 1.9 中被完全刪除。
$(selector).live( eventName, function(){} );
可以替換為以下on()方法：
$(document).on( eventName, selector, function(){} );
例如，如果您的頁(yè)面使用類名動(dòng)態(tài)創(chuàng)建元素，dosomething您會(huì)將事件綁定到已經(jīng)存在的父級(jí)（這是這里問(wèn)題的核心，您需要綁定到存在的東西，不要綁定到動(dòng)態(tài)內(nèi)容），這可以（也是最簡(jiǎn)單的選項(xiàng)）是document. 盡管記住document可能不是最有效的選擇。
$(document).on('mouseover mouseout', '.dosomething', function(){// what you want to happen when mouseover and mouseout// occurs on elements that match '.dosomething'});
事件綁定時(shí)存在的任何父級(jí)都可以。例如
$('.buttons').on('click', 'button', function(){// do something here});
將適用于
<div><!-- <button>s that are generated dynamically and added here --></div>
本文完
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情