jQuery if clicked?

Question

Hi,

With the following piece of code... Is it possible to say, if the li was clicked do this if not(user click somewhere else) do that? The code will only make the div disappear if the user clicks something in the list. I need it to disappear if they click anywhere else as well... ?? Thanks!

.bind('blur', function() {
   $('#search_suggestions_list li').click(function() {
       var selectedString = $(this).text();
       $('#search-box').val(selectedString);
       setTimeout("$('#search_suggestions').fadeOut('fast');", 200);
   })
})

Answer 1

$(document).click(function(){
   //user clicked anywhere on the page
});

$('#search_suggestions_list li').click(function() {
   //user clicked on the li
   return false;
});

Make sure to return false, otherwise the document click event will be called as well.

Answer 2

$('#search_suggestions_list li').click(function() {
   var selectedString = $(this).text();
   $('#search-box').val(selectedString);
   setTimeout("$('#search_suggestions').fadeOut('fast');", 200);
})

$('#search-box').blur(function(){
    // do something else
});

Answer 3

Mike, I've written something similar to this for a Google Chrome Extension using plain JavaScript (it'd be easy enough to adapt to jQuery).
You can check out that code here: http://code.google.com/p/select-actions/source/browse/select_actions.js

To convert this to meet your requirements, you could try this:

• in document ready, add a listener that watches for mouse up
• get the element from which the mouseup occurred
• conditionally handle your clicks

Feel free to use/modify my code to meet your needs.

Edit: If you'd like to test the functionality to see if it meets your needs, the Chrome Extension is in the Gallery: https://chrome.google.com/extensions/detail/kgjnfpggcjmlkfbicpiedhkcbbfeoohl?hl=en-US

Answer 4

Handle the click event on the document, and then handle the click event on your li. Inside the click event for the li, use the stopPropogation function to prevent the document (parent) click event from firing...

$(document).click(function() {
  // Clicked outside the LI
});

$('#search_suggestions_list li').click(function(e) {
  var selectedString = $(this).text(); 
  $('#search-box').val(selectedString); 
  setTimeout("$('#search_suggestions').fadeOut('fast');", 200);

  e.stopPropagation(); // Stops document.click from firing
})