my site is ajax-based. I have some div with id=content
and it's generated dynamically by .get
-request (from jquery). The problem is that inside content there are links: <a href="site.com/#some_hash">text</a>
and it should reload page applying to logic that some_hash
. How can I grab click at such links and reload page?
$('.content a').bind('click', function() {
alert('Clicked!');
});
This doesn't alert.
I think you should use jquery on() http://api.jquery.com/on/
$(document).on('click', '#content a', function() {
YOUR FUNCTION
});
The reason your current code is not working is that jQuery "bind" runs only once - when the page is loaded. So links that are added to the DOM after that don't have the event bound to them.
To fix this, you can use the .on() method in jQuery.
$(document).on('click', '#content a', function() {
YOUR FUNCTION
});
You can also use .live() - but that is deprecated now.
However Ajax has a large and well established set of design patterns and while I'm not going to get into the pros and cons of making an entire site ajax, I would strongly recommend you look at some plugins made for this kind of functionality like:
These will do a lot of this kind of stuff for you right out of the box, allowing you to focus on other things.