jQuery的$(document).on()方法詳解和示例

jQuery的$(document).on()方法

jQuery的$(document).on()方法是jQuery中的事件綁定方法，它可以將一個(gè)函數(shù)綁定到指定的元素上，當(dāng)指定的元素觸發(fā)指定的事件時(shí)，這個(gè)函數(shù)就會(huì)被觸發(fā)執(zhí)行。

$(document).on()方法支持兩種語(yǔ)法：

$(document).on(events,selector,data,handler);

$(document).on(events,selector,handler);

其中events參數(shù)表示要綁定的事件，可以是多個(gè)事件，用空格分隔；selector參數(shù)表示要綁定的元素；data參數(shù)表示傳遞給handler函數(shù)的參數(shù)；handler參數(shù)表示要綁定的函數(shù)。

示例

下面的示例演示了如何使用$(document).on()方法綁定一個(gè)函數(shù)到文檔中的所有按鈕上：

$(document).on('click','button',function(){
    alert('按鈕被點(diǎn)擊了！');
});

上面的代碼將一個(gè)函數(shù)綁定到文檔中所有按鈕上，當(dāng)按鈕被點(diǎn)擊時(shí)，就會(huì)彈出一個(gè)提示框。

$(document).on()方法還可以綁定給動(dòng)態(tài)添加的元素，例如：

$(document).on('click','.myButton',function(){
    alert('按鈕被點(diǎn)擊了！');
});
$('#container').append('按鈕');

上面的代碼將一個(gè)函數(shù)綁定到文檔中所有帶有myButton類(lèi)的按鈕上，由于這個(gè)按鈕是動(dòng)態(tài)添加的，所以$(document).on()方法可以自動(dòng)綁定到這個(gè)按鈕上，當(dāng)按鈕被點(diǎn)擊時(shí)，就會(huì)彈出一個(gè)提示框。

$(document).on()方法是jQuery中一個(gè)非常有用的事件綁定方法，它可以將一個(gè)函數(shù)綁定到指定的元素上，當(dāng)指定的元素觸發(fā)指定的事件時(shí)，這個(gè)函數(shù)就會(huì)被觸發(fā)執(zhí)行，而且它還可以綁定給動(dòng)態(tài)添加的元素，使用起來(lái)非常方便。

千鋒教育是高品質(zhì)web前端培訓(xùn)機(jī)構(gòu)，千鋒教育擁有大量實(shí)力web前端培訓(xùn)講師，提供優(yōu)質(zhì)的web培訓(xùn)課程，web前端培訓(xùn)，歡迎報(bào)名千鋒教育。