Как загрузить php-страницу в div, используя jquery

0

Представьте, что у меня есть два div, слева div и правый div,

В левом div у меня есть кнопка. Когда я нажимаю на домашнюю кнопку, страница home.php загружается в правый div, я использую функцию load(), чтобы сделать это, и когда я нажимаю на кнопку, страница about.php загружается в правый div.

Моя проблема в том, что у меня есть другие кнопки на этой странице (я имею в виду about.php). Когда я нажимаю на него, некоторые другие страницы должны загружаться в правом div.

Я имею в виду, когда я нажимаю на кнопку в левом div, about.php загружается в правый div.

У меня нет проблем с этим, это нормально работает, но проблема в том, что когда я нажимаю кнопку в about.php, я хочу, чтобы about.php скрывался и загружал x.php вместо него (правый div).

Это код, который у меня есть:

$('#about').click(function () {
   $('#rightdiv').load('about.php', function() {
      $('#about_button').click(function () {
          $('#rightdiv').load('x.php');
      })
   })
})
  • 0
    Любые ошибки консоли? Что еще ты пробовал? Что возвращается, когда вы его отлаживаете?
  • 0
    @Fossn замечание возвращается, about.php не скрывается, а x.php не загружается, я имею в виду, что замечание происходит, когда я нажимаю кнопку
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

Прежде всего, вы не должны вставлять обработчики ваших кликов, как вы это делали, - они должны быть отдельными. Во-вторых, когда вы загружаете about.php, jQuery не знает о новом материале, который вы разместили в DOM. Чтобы исправить это, вы используете делегирование событий, то есть событие click от about.php будет пузыриться до элемента, который уже существовал во время загрузки страницы. jQuery знает об этом элементе и правильно обрабатывает событие.

$('#about').click(function () {
   $('#rightdiv').load('about.php');
});

// 'click' event delegated to 'body'
$('body').on('click', '#about_button', function () { // #about_button is in about.php
   $('#rightdiv').load('x.php');
})
Поделиться
  • 0
    Два разных ченнеллера делают одно и то же? Это не хорошая практика, кто-то с вашим представителем должен сделать лучше
  • 0
    Они не делают то же самое. У OP были вложенные обработчики, которые не будут работать. Первый обработчик имеет дело с событиями в оригинальном документе, второй имеет дело с событиями, загруженными в DOM через вызов AJAX. Сказав это, вы можете обернуть их всех в один гигантский обработчик, но для ОП я хотел убедиться, что концепция и направление понятны.
0

Вместо привязки события к элементам, находящимся на загрузке, вы a.nav браузеру проверить a.nav которые встречаются в document.

<a class="nav" href="about.php">about.php</a>
<a class="nav" href="other.php">other.php</a>
<a class="nav" href="last.php">last.php</a>

$(document).on('click', 'a.nav',function (e) {
    e.preventDefault();
    var page = this.href;
    $('#rightdiv').load(page);
})

Лучше сделать первый селектор ($(document)) как можно ближе к фактическим элементам, и настоятельно рекомендуется использовать идентификатор:

$('#rightdiv').on('click', 'a.nav',function (e) {});

В этом фрагменте все a.nav в #rightdiv будут запускаться, начальная загрузка или динамически.

Поделиться
  • 0
    Где часть о загрузке x.php при нажатии на кнопку во вновь загруженном DIV?
  • 0
    Пропустил, тема не самая ясная, с которой я столкнулся
Показать ещё 2 комментария
0

вы должны привязать все события кликов после загрузки этой php-страницы, поэтому создайте функцию, которая будет делать это после каждого вызова.load

Поделиться
  • 0
    О, пожалуйста, не :), это будет сбивать с толку и очень трудно поддерживать. Если вы .on() используете .on() , это не создает проблем и не требует создания функций для повторной привязки всех событий (что может создать много проблем, например, когда все действия происходят дважды!)
  • 0
    Разве не для этого .load обратный вызов .load ? Он уже делает это.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню