jquery - 通过单击外部文件中的链接将外部文件加载到索引模板中

Question

上下文:下面的 jquery 脚本根据用户点击的链接将外部文件加载到我的索引模板中的 div 中。

问题:外部文件中的链接不遵循 jquery 脚本或 CSS 样式，因为它们无法将新的外部文件加载到位于索引模板中的 div

j查询:

$(window).on('load', function() {
    $("#content").load("content/index_content.php");

    $('a').click(function(e){
        e.preventDefault();
        $("#nav div").removeClass("active");
        $(this).children("div").addClass("active");
        $('#content').load($(this).attr('href'));
        return false;
    )};
)};

Answer 1

我认为您指的是事件委托(delegate)。 (参见:https://learn.jquery.com/events/event-delegation/)

您当前的 jQuery 是在窗口加载时运行的，因此在此之后添加的任何元素都没有附加到它们的事件。您可以通过将事件监听器添加到父元素并将事件委托(delegate)给子元素来解决此问题。

您需要将 $('a').click(function(e){ 更改为类似 $(document).on('click', 'a ', function(e) { 这意味着只要在文档中单击 anchor 标记，就会触发该事件。

例如

$(window).on('load', function() {
    $("#content").load("content/index_content.php");

    $(document).on('click', 'a', function(e) {
        e.preventDefault();
        $("#nav div").removeClass("active");
        $(this).children("div").addClass("active");
        $('#content').load($(this).attr('href'));
        return false;
    )};
)};