Содержимое jQuery загружено через .load(), но ссылка href не работает

Question

У меня проблема с содержимым HTML, загруженным с помощью .load(). У меня есть «гармоничное» меню, которое отлично работает, и при нажатии на элемент в меню есть небольшой код jquery, используемый для загрузки необходимого содержимого в назначенный [div]

Проблема, с которой я столкнулась, заключается в том, что на некоторые загруженные страницы содержат некоторые ссылки href = "". Нажатие этих ссылок не вызывает загрузку «следующей» страницы в div, но вместо этого фактически заставляет перезагружать главную страницу (как будто вы только что нажали кнопку RELOAD в браузере) ...

menu.js (пропущено)

$(document).ready(function() { 
    $(".Page1").click(function() { 
     $("#pageloadarea").load('Page1.php'); 
     $('head').append(
      '<link rel="stylesheet" href="includes/style.css" type="text/css" />' 
     ); 
     return false; 
    }); 

    $(".Page2").click(function() { 
     $("#pageloadarea").load('Page2.php'); 
     $('head').append(
      '<link rel="stylesheet" href="includes/style.css" type="text/css" />' 
     ); 
     return false; 
    }); 
}); 

Раздел меню (пропущено) из index.php страницы

<ul> 
    <li class="button"><a href="" class="Page1">Page1</a></li> 
    <li class="dropdown"> 
    <ul> 
     <li><a href="" class="Page2">Page2</a></li> 
     <li><a href="" class="Page3">Page3</a></li> 
     <li><a href="" class="Page4">Page4</a></li> 
    </ul> 
    </li> 
</ul> 

В index.php страница меню находится внутри [div id="menu"] и содержание впрыскивается/загружают в [div id="pageloadarea"]

нажав на Стр.1 в меню успешно загружает page1.php в [div], как это делает нажав Page2, PAGE3 и Page4 (из меню) ...

После page1.php был загружен в [div] есть стандартная ссылка

<a href="" class="Page2">Page 2</a> 

Это ссылка, которая не работает. У меня есть многочисленные подстраницы, в которых есть ссылки [a href], и ни одна из них не работает после того, как основное содержимое прошло через процесс .load() ...

Любая помощь была бы оценена!

Answer 1

$(document).ready(function() { 
    $(document).on("click",".Page1", function() { 
     $("#pageloadarea").load('Page1.php'); 
     $('head').append(
      '<link rel="stylesheet" href="includes/style.css" type="text/css" />' 
     ); 
     return false; 
    }); 

    $(document).on("click",".Page2", function() { 
     $("#pageloadarea").load('Page2.php'); 
     $('head').append(
      '<link rel="stylesheet" href="includes/style.css" type="text/css" />' 
     ); 
     return false; 
    }); 
}); 

Используйте это, поскольку оно свяжет событие с новыми загруженными элементами DOM.

Answer 2

Вам нужно прикрепить все обработчики событий к ссылкам после того, как ваша страница теперь загружается или используется делегирование.

Делегирование Пример

HTML ссылка:

<!-- add a class to filter ajax links on "ajaxify", also use the HREF attribute 
    For the page to be loaded - not sure whay you arent doing that now... --> 
<a href="Page2.php" class="Page2 ajaxify">Page2</a> 

JS

// use delegation to attatch the event handlers 

$(function(){ 
    $(document).on('click', 'a.ajaxify', function (e) { 
     e.preventDefault(); // prevent normal link navigation 
     var $this = $(this), 
      url = $this.attr('href'); 

     $("#pageloadarea").load(url); 
     $('head').append('<link rel="stylesheet" href="includes/style.css" type="text/css" />'); 

     return false; 
    }); 
}); 

С помощью делегирования обработчик прикрепленную к document элементу и, когда событие щелчка продувают до фильтруется ... если триггер был a.ajaxify, тогда будет вызываться обработчик. Это позволяет обрабатывать экземпляры a.ajaxify, которые не были в DOM при первом подключении обработчика.