在網(wǎng)頁(yè)開(kāi)發(fā)中，jQuery 是很常用的前端庫(kù)，它可以很輕易的實(shí)現(xiàn)很多復(fù)雜的操作，比如：隱藏、顯示元素。但是，我們有時(shí)候會(huì)遇到一個(gè)問(wèn)題，就是在隱藏或者顯示元素之后，原本綁定的事件不起作用了。這是為什么呢？

// 給 .btn 綁定點(diǎn)擊事件
$('.btn').on('click', function () {
// 點(diǎn)擊后隱藏 .box1 元素
$('.box1').hide();
});
// 給 .box1 綁定鼠標(biāo)懸浮事件
$('.box1').on('mouseover', function () {
// 鼠標(biāo)懸浮時(shí)顯示 .box2 元素
$('.box2').show();
});

以上就是一個(gè)很簡(jiǎn)單的例子，當(dāng)點(diǎn)擊 .btn 元素后，.box1 元素會(huì)被隱藏掉，同時(shí)鼠標(biāo)懸浮在 .box1 上時(shí)，.box2 元素會(huì)被顯示出來(lái)。但是，我們發(fā)現(xiàn)當(dāng) .box1 被隱藏之后，鼠標(biāo)懸浮在 .box1 上時(shí)，.box2 并沒(méi)有顯示，這是因?yàn)樵陔[藏或者顯示元素之后，原本綁定的事件不起作用了。

那么我們應(yīng)該如何解決這個(gè)問(wèn)題呢？

// 給 document 綁定 .box1 鼠標(biāo)懸浮事件
$(document).on('mouseover', '.box1', function () {
// 鼠標(biāo)懸浮時(shí)顯示 .box2 元素
$('.box2').show();
});

通過(guò)將事件綁定到 document 上，然后利用事件委托的方式，使得在任何時(shí)候，都能夠捕獲到 .box1 并且觸發(fā)鼠標(biāo)懸浮事件，從而保證不會(huì)因?yàn)樵氐碾[藏或顯示而導(dǎo)致事件失效的問(wèn)題。