Changed the HREF of a link w/JQuery, new link won't work
I'm fairly new to JQuery and Javascript in general. I don't think I'm trying to do anything too tricky, but this has me stumped.
I have a series of links on my page which trigger a certain behaviour within the page when clicked. Once they are clicked again, they are supposed to jump to another page, but, using my current code, they don't do anything.
I'm guessing there's a really simple workaround to this problem, but I can't figure it.
I've put up a bare-bones example (displaying the same problems) here: http://jsbin.com/egaji3/edit. Code is also pasted below.
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.d开发者_开发技巧ummy { 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>
You have further explained that you want the first click to set the link and the second to navigate to it.
Your problem then is that when you bind the event handler, it stays bound even though you've removed the dummy class. Simplest solution is simply to use live() instead:
$("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() (as implicitly called from click() is a static binding. live() updates so once you remove the dummy class, the event handler will no longer be called.
An alternative approach is to use one(), which is called but once:
$("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;
});
After you change the href the click handler is still attached. Since you're returning false it stops the link navigation. If you just remove the handler with unbind('click') after the first click it will work.
加载中,请稍侯......
精彩评论