Я подозреваю, что центральная проблема заключается в том, что вы получили недопустимый документ с несколькими элементами с одинаковым значением id. На самом деле, за исключением кода, который вы не обнаружили, у вас будет недействительный документ во второй раз, когда кто-то нажимает навигационную ссылку, потому что этот код:
$('<div id="mainframe"></div>').appendTo('article').load(link);
... добавляет a div с "mainframe" id к элементу article, не удаляя предыдущий. Таким образом, у вас будет два элемента с одинаковым идентификатором. Если загружаемый контент также использует значения идентификаторов (например, «switch» и «other-element -loaded-async»), вы также в конечном итоге продублируете их.
Вы должны убедиться, что у вас всегда есть не более один элемент с заданным идентификатором. Вы можете сделать это, заменив строку выше:
$('article').empty().append($('<div id="mainframe"></div>').load(link));
Рабочий пример здесь (я также исправил то, что, как я подозреваю, было ошибкой копирования и вставки в цитируемом HTML)
Если вы можете избавиться от окружающего «мэйнфрейма» div (поместив его в загруженный контент вместо кода), вы можете получить лучший пользовательский опыт, потому что нам не пришлось бы очищать article до на новый контент, поступающий с сервера. Код также становится проще:
$('article').load(link);
Оригинальный ответ :
Вы не предоставили достаточно информации, чтобы действительно ответить на ваш вопрос, но я думаю, ваш код выглядит следующим образом:
$("#target").load(url);
$("#target selector_for_loaded_content").bind("someevent", ...);
где это должно выглядеть так:
$("#target").load(url, function() {
$("#target selector_for_loaded_content").bind("someevent", ...);
});
load происходит асинхронно , поэтому в первом блоке кода выше элементы еще не существуют, и поэтому они не подключаются. Во втором блоке кода мы используем обратный вызов функции load, поэтому мы ждем, чтобы подключить их, пока они не загрузятся.
Другой подход, в зависимости от того, какие события вы используете и что еще делаете с элементами после их загрузки, заключается в использовании delegate:
$("#target").load(url);
$("#target").delegate("selector_for_loaded_content", "someevent", ...);
delegate перехватывает событие на цели, но затем проверяет, достигло ли оно этой цели через что-то, совпадающее с селектором, и если это так, запускает функцию события (в основном), как если бы событие было перехвачено на элемент. Это очень удобно для динамических страниц, где вы создаете / удаляете много элементов.
Если вы используете jQuery 1.7 или более позднюю версию, в то время как delegate все еще там, вы также можете использовать новый on, который, по словам команды jQuery, является способом продвижения для всех перехватов событий:
$("#target").on("someevent", "selector_for_loaded_content", ...);
Обратите внимание, что порядок аргументов отличается от delegate и on.