Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2016, 13:58
Новичок на форуме
Отправить личное сообщение для vasek123 Посмотреть профиль Найти все сообщения от vasek123
 
Регистрация: 07.10.2016
Сообщений: 7

Поиск элементов на странице
Добрый день. есть следующая страница, и скрипт в конце страницы
<!DOCTYPE html>
<html>
<head>
  <title>title</title>
</head>
<body>

<div class="menu">
  <ul>
    <li>
      <a href="/" class="load_page active">Home</a>
    </li>
    <li>
      <a href="/page1.php" class="load_page">link1</a>
    </li>
    <li>
      <a href="/page2.php" class="load_page">link2</a>
    </li>
    <li>
      <a href="/page3.php" class="load_page">link3</a>
    </li>
    <li>
      <a href="/page4.php" class="load_page">link4</a>
    </li>
  </ul>
</div>

<div class="content">home page</div>

<script src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
  
  $('.load_page').on('click', function(){
    var link = $(this).attr("href");
    var title = $(this).attr("title");
    $('title').text(title);
    $(".menu>ul>li>a").removeClass("active");
    $(this).addClass('active');
    
    $(".content").load(link,
      {
        param1: "param1"
      },
      function(){
        var redirect = link;
        history.pushState('', '', redirect);
      }
    );
    return false;

  });

</script>

</body>
</html>



Содержимое страниц page1.php, page2.php и т.д. следующее


<?php if ($_POST["param1"] != "param1") { ?>
<!DOCTYPE html>
<html>
<head>
  <title>link1</title>
</head>
<body>

<div class="menu">
  <ul>
    <li>
      <a href="/" class="load_page" title="Home">Home</a>
    </li>
    <li>
      <a href="/page1.php" class="load_page active" title="link1">link1</a>
    </li>
    <li>
      <a href="/page2.php" class="load_page" title="link2">link2</a>
    </li>
    <li>
      <a href="/page3.php" class="load_page" title="link3">link3</a>
    </li>
    <li>
      <a href="/page4.php" class="load_page" title="link4">link4</a>
    </li>
  </ul>
</div>
<?php } ?>


<div class="content">
<h1>link1 page</h1>
  <ul>
    <li>
      <a href="/page5.php" class="load_page" title="link5">link5</a>
    </li>
    <li>
      <a href="/page6.php" class="load_page" title="link6">link6</a>
    </li>
    <li>
      <a href="/page7.php" class="load_page" title="link7">link7</a>
    </li>
    <li>
      <a href="/page8.php" class="load_page" title="link8">link8</a>
    </li>
  </ul>
</div>


<?php if ($_POST["param1"] != "param1") { ?>
<script src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
  
  $('.load_page').on('click', function(){
    var link = $(this).attr("href");
    var title = $(this).attr("title");
    $('title').text(title);
    $(".menu>ul>li>a").removeClass("active");
    $(this).addClass('active');
    
    $(".content").load(link,
      {
        param1: "param1"
      },
      function(){
        var redirect = link;
        history.pushState('', '', redirect);
      }
    );
    return false;

  });

</script>

</body>
</html>
<?php } ?>


То есть, при прямом переходе по ссылке получаем полностью всю страницу, если подгружаем страницу с post параметром, то получаем только нужный нам блок с контентом.

Вопрос и проблема в следующем, если мы заходим на страницу набрав адрес в браузере, то у нас на все ссылки с классом load_page отрабатывает скрипт.
И если мы зайдем на страницу home, нажмем по ссылке в меню, например link1, то у нас отработает скрипт и подгрузит блок content со страницы page1.php.
Но при дальнейшем нажатии на ссылки которые есть в подгруженном скриптом блоке content, наш скрипт ссылки видеть не будет, и не отработает. Как это исправить?
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2016, 15:56
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

почитай про делегирование событий, например https://learn.javascript.ru/event-delegation

для jquery, первое что попалось http://codernote.ru/jquery/obrabotka...dom-elementov/

т.е. если содержимое блока content переписывается, то обрабатывай клики на элементе .content или выше

Последний раз редактировалось Pavel M., 07.10.2016 в 16:05.
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2016, 16:59
Новичок на форуме
Отправить личное сообщение для vasek123 Посмотреть профиль Найти все сообщения от vasek123
 
Регистрация: 07.10.2016
Сообщений: 7

Большое человеческое спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск по 1 странице VasyaPetrov123 Общие вопросы Javascript 7 07.08.2015 05:04
Кол-во элементов на странице Garro Общие вопросы Javascript 7 13.09.2013 11:59
Поиск элементов на другой странице chudikos Events/DOM/Window 4 10.11.2012 10:12
Поиск самого крупного шрифта на странице eXTrEMe888 Events/DOM/Window 11 03.05.2012 20:23
Поиск на странице maza51 Общие вопросы Javascript 1 20.03.2011 12:26