Изменен HREF ссылки с JQuery, новая ссылка не будет работать - PullRequest
Новая
       4

Изменен HREF ссылки с JQuery, новая ссылка не будет работать

2 голосов
/ 06 августа 2010

Я довольно плохо знаком с JQuery и Javascript в целом.Я не думаю, что пытаюсь что-то сделать слишком хитро, но это поставило меня в тупик.

У меня есть серия ссылок на моей странице, которые вызывают определенное поведение на страницепри нажатии.После повторного нажатия на них, они должны перейти на другую страницу, но, используя мой текущий код, они ничего не делают.

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

Я привел пример «голой кости» (отображающий те же проблемы) здесь: http://jsbin.com/egaji3/edit. Код также вставлен ниже.

JS:

$('a.dummy').click(function(){
  var myquery = $(this).attr('title');
  $('p#output').text('You clicked on the ' + myquery + '. Click again to Google it.');
  $('a').addClass('dummy');
  $('a').attr('href', '#'); 
  $(this).removeClass('dummy');
  $(this).attr('href', 'http://www.google.com.au/#q=' + myquery); 
  return false;
});
​

HTML: 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  a { color: #00f; background: #ff0; }
  a.dummy { color: #999; background: none; }
</style>
</head>
<body>
  The things: 
  <a class="dummy" href="#" title="first thing">First Thing</a>
  <a class="dummy" href="#" title="second thing">Second Thing</a>
  <a class="dummy" href="#" title="third thing">Third Thing</a>  
  <p id="output">You haven't clicked anything yet!</p>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 06 августа 2010

После изменения href обработчик кликов по-прежнему подключен. Так как вы возвращаете false, это останавливает навигацию по ссылкам. Если вы просто удалите обработчик с unbind ('click') после первого клика, он будет работать.

1 голос
/ 06 августа 2010

Вы также объяснили, что вы хотите, чтобы первый щелчок установил ссылку, а второй - чтобы перейти к ней.

Ваша проблема в том, что когда вы связываете обработчик событий, он остается связанным, даже если вы 'мы удалили класс dummy.Самое простое решение - просто использовать live() вместо: 

$("a.dummy").live("click", function() {
  var myquery = $(this).attr('title');
  $('p#output').text('You clicked on the ' + myquery + '. Click again to Google it.');
  $('a').addClass('dummy');
  $('a').attr('href', '#'); 
  $(this).removeClass('dummy');
  $(this).attr('href', 'http://www.google.com.au/#q=' + myquery); 
  return false;
});

bind() (как неявно вызывается из click() статическая привязка . live() обновляется, поэтому после удаления фиктивного класса обработчик событий больше не будет вызываться.

Альтернативный подход заключается в использовании one(), который вызывается только один раз: 

$("a.dummy").one("click", function() {
  var myquery = $(this).attr('title');
  $('p#output').text('You clicked on the ' + myquery + '. Click again to Google it.');
  $('a').addClass('dummy');
  $('a').attr('href', '#'); 
  $(this).removeClass('dummy');
  $(this).attr('href', 'http://www.google.com.au/#q=' + myquery); 
  return false;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...