加載的內容無法調用父的功能

Question

我有一個文件有：

<button class="route" data-route-url="/about">About</button> 
&nbsp; 
<a href="#" class="route" data-route-url="/about">About</a> 

<div id="page-content"> 
</div> 

$('.route').click(function() { 
    console.log('.route.click()'); 
    var url = $(this).data('route-url'); 
    $('#page-content').html('loading...'); 
    $.get(url, function(data) { $('#page-content').html(data); }); 
    return false; 
}); 

它完美，直到這一點，並加載有關頁面。

關於頁面帶來的另一個按鈕也叫「路線」：當我點擊它沒有任何反應

<button class="route" data-route-url="/contact">Contact</button> 

但是，我也沒有得到該消息的console.log，這樣看來，頁面，這是第一次加載內部div內容無法看到稱爲路由的父功能，這是否按預期工作？

我該如何做這項工作？

Answer 1

您可以通過使用事件代理與.on()這樣做，因爲您的按鈕被動態添加到DOM，之前註冊的事件不適用於新添加的按鈕。因此，您需要使用事件委派，即將事件附加到父容器（已存在）或文檔元素（正如我在代碼中所用的那樣），併爲代表團設置一次具有「.route」類的元素現在或將來可以隨時使用。

$(document).on('click','.route' ,function() { 
    console.log('.route.click()'); 
    var url = $(this).data('route-url'); 
    $('#page-content').html('loading...'); 
    $.get(url, function(data) { $('#page-content').html(data); }); 
    return false; 
}); 

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中的視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。