$( "ul#results" ).click(function() {$( this ).slideUp();});
I'm using the code in the following tutorial: http://ninetofive.me/blog/build-a-live-search-with-ajax-php-and-mysql Above is my jQuery code targeting the AJAX dropdown.
I'm trying to make the dropdown fade away when the user clicks on a link, without having the page redirect or refresh. I'm also using hashes in the URL (handled server side) for my link. For instance:
mysite.com/#selecteddropdowndata
I'm not sure whether the problem is with my URL hashes, jQuery or a combination.
here is a link to a working jsfiddle: http://jsfiddle.net/Grimbode/6zAYq/2/
If you click on a link ( ) you need to prevent the default click event to go off, and trigger the one you actually want.
html:
<ul id="results">
<li><a href="www.google.com">test123</a></li>
<li><a href="www.google.com">test123</a></li>
<li><a href="www.google.com">test123</a></li>
</ul>
js:
$( "a" ).on('click', function(e){
e.preventDefault();
$('#results').trigger('click');
});
$('#results').on('click', function(e){
$( this ).slideUp();
});
To disable a link when you click on it, use the preventDefault()
function. Your code shows you're targeting a <ul>
tag, not a link. Try this instead:
$('a.yourlink').click(function(e){
$("ul#results").slideUp();
e.preventDefault();
});