問題jquery.load（）

Question

這可能是非常明顯的事情，但我是jquery的新手，所以不知道問題出在哪裏。

我正在做一個簡單的論壇（看我能不能）使用php/jquery/html等。當它第一次打開它顯示論壇（工作正常）和空盒子（div）的列表爲其他內容。當你從列表中點擊一個論壇時，它會調用showForum（id）並提出一個提醒（只是讓我知道它正在工作），並將論壇中的線程列表加載到一個空div（正常工作）。問題是，當我嘗試加載一個線程（通過點擊它），沒有任何反應，甚至沒有警報。

jQuery代碼：

$(document).ready(function() { 
    $('.flink').click(function() { 
     var id = $(this).attr('id'); 
     showForum(id); 
     alert("Forum opened"); 
    });      

    $('.tlink').click(function() { 
     var id = $(this).attr('id'); 
     showThread(id); 
     alert("Thread opened"); 
    }); 
}); 

function showForum(id) { 
    $('.topic-container').load("showforum.php", { 
    'f': +id 
    }); 
    showLinks(id, 1); 
} 

function showThread(id) { 
    $('.entry-container').load("showthread.php", { 
    'thread': +id 
    }); 
    showLinks(id, 2); 
    alert(id); 
} 

HTML代碼：

我檢查的類名，以確保他們是對的。我點擊了一個論壇公開呼籲showThread（只是爲了確保該功能的工作），它工作正常。

任何人都可以給的幫助將不勝感激。

Answer 1

您需要使用on加載的內容的事件委託。您的點擊事件僅適用於DOM中存在的元素。因此，您需要將事件附加到父代（已存在）或文檔元素，因此稍後添加的元素將具有「委派」可用的事件。

See .on()

Sample Demo

在你的情況我猜測.tlink期間load到DOM稍後時間加入。但是，即使它存在之前，你也將事件附加到.tlink，所以有效的綁定是無效的。

$(document).on('click','.flink', function() { 
     var id = $(this).attr('id'); 
     showForum(id); 
     alert("Forum opened"); 
    });      

    $(document).on('click','.tlink', function() { 
     var id = $(this).attr('id'); 
     showThread(id); 
     alert("Thread opened"); 
    }); 

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

Answer 2

您需要使用。對處理程序的點擊，因爲你的內容被動態加載：http://api.jquery.com/on/

爲您的代碼試試這個：

$(document).on("click", ".flink", fLink); 
function fLink(e) { 
var id = $(this).attr('id'); 
     showForum(id); 
     alert("Forum opened"); 
} 

$(document).on("click", ".llink", lLink); 
function lLink(e) { 
var id = $(this).attr('id'); 
     showThread(id); 
     alert("Thread opened"); 
}