Та же функция нажатия JQuery для многочисленных ссылок - PullRequest
Новая
       5

Та же функция нажатия JQuery для многочисленных ссылок

2 голосов
/ 10 марта 2010

У меня есть страница, которая имеет несколько ссылок с различными атрибутами (эти атрибуты будут извлечены из базы данных):

index.php 

<html>
<head>
<script type='text/javascript' src='header.js'></script>
</head>
<body>
<a href="#" class="link_click"id="12">My_Link_1</a>
<a href="#" class="link_click"id="21">My_Link_2</a>

<div id='my_container'> </div>

</body>
</html>

Мой файл header.js содержит: 

$(document).ready(function(){
    $('.link_click').click(function(){
      $("#my_container").load("classes/class.project.php", {proj: $(this).attr('id')} );
      return false;
  });
});

class.project.php довольно просто: 

<?php
echo "<div id='project_container'>project = ".$_POST['proj']." : end project</div>";
?>

Это загружает и передает переменную ID (которая на самом деле приходит из базы данных) в class.project.php. Он отлично работает для первого клика по ссылке (любая ссылка будет работать). При нажатии на одну ссылку другие ссылки с этим классом div не будут работать. Такое чувство, что javascript загружает class.porject.php и он не обновит его до #my_container div.

Я попытался запустить это, как предложено peterpeiguo на JQuery Fourm , с окном предупреждения для тестирования, заключенным в .each:

Скопировать код 

$(document).ready(function() {
     $('.link_click').each(function() {
        $(this).click(function() {
          alert($(this).html());
     });
  });
});

Кажется, это нормально работает для окна предупреждения. Но при применении к .load() он не перезагружает страницу с новой переданной переменной. На самом деле, он даже не перезагружает текущую страницу. В этот момент ссылка не выполняет никаких функций.

Пример сайта можно посмотреть здесь: http://nobletech.net/gl/

Ответы [ 3 ]

3 голосов
/ 10 марта 2010

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

Что вы действительно хотите сделать, так это нацелить нагрузку. Что-то вроде: 

$("#project_container").load("classes/class.project.php #project_container", {proj: $(this).attr('projid')} );

Это загружает вещи только в соответствующий контейнер, оставляя ссылки и другие вещи без изменений.

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

Кстати, кэширование не должно быть проблемой в этом случае, поскольку .load использует POST, если переданы параметры. Вам нужно беспокоиться только о Ajax-кэшировании с помощью GET

0 голосов
/ 10 марта 2010

Извините, но это может быть совершенно неправильно, но после изучения вашего ответа XHR я увидел, что вы отправляете обратно html, который заменяет ваши существующие элементы.

Таким образом, быстрое решение - отправить в ответ XHR следующее (ваш php-скрипт также должен это вывести): 

<script>
$('.link_click').each(function() {
    $(this).click(function() {
      alert($(this).html());
 });
</script>
0 голосов
/ 10 марта 2010

Звучит так, будто запрос кешируется для меня.

Попробуйте это: 

 $.ajaxSetup ({
    // Disable caching of AJAX responses */
    cache: false
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...