Question

我对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>

Answer 1

您进一步解释说，您希望第一次点击设置链接，第二次点击以导航到它。

您的问题是，当您绑定事件处理程序时，即使您已删除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;
});

Answer 2

更改href后，仍然附加了单击处理程序。由于您返回false，因此会停止链接导航。如果您只是在第一次单击后使用unbind（'click'）删除处理程序，它将起作用。

使用/ JQuery更改链接的HREF，新链接将无法正常工作

2 个答案: