CSS Display:None; -> with jQuery Click() -> jQuery ComboBox

Question

So I have noticed that there seems to be a glitch with using jQuery's click() when inside of an element <div style="display: none;"></div>

Is it possible to get this to work? I have tested it here, and seems to work. http://jsfiddle.net/FBYhe/

I am using jQuery UI -> ComboBox widget.

This is my current code.

    <select name="labels" id="labelsList">
        <option>Filter By Label</option>
        <option selected>Show All</option>
        <option class="ClickMe">Filter By Label</option>
    </select>
    <script>
        $(document).ready(function(){
            $(".ClickMe").click(function() {
                alert('tets');
            });
        });
    </script>

So I get ZERO alerts with this, i'm not sure why, but I BELIEVE it has to do with Display:None.

Any help would be greatly appreciated!

Answer 1

If you are using the jQuery UI combobox autofill widget you are trying to get this to work onclick:

<li class="ui-menu-item" role="menuitem">
  <a class="ui-corner-all" tabindex="-1">MENU ITEM</a>
</li>

That is not the same as the html in your post.

You will need to bind to

$(".ui-menu-item");

if you want to execute something onclick of a jQuery UI widget

or hack this

$.widget( "ui.combobox", {
.
.
.
    .click(function() {
      // close if already visible
      if ( input.autocomplete( "widget" ).is( ":visible" ) ) {

        // here I guess you want your thing
        // 
        input.autocomplete( "close" );
        return;
      }

      // work around a bug (likely same cause as #5265)
      $( this ).blur();

      // pass empty string as value to search for, displaying all results
      input.autocomplete( "search", "" );
      input.focus();
    });

Answer 2

Your code won't work on IE or Chrome, because neither of those implement the onClick event over an option element. Perhaps you can add an onchange event, for example:

<select name="labels" id="labelsList" onchange="test_click(this)">
     <option>Filter By Label</option>
     <option selected>Show All</option>
     <option class="ClickMe">Filter By Label</option>
</select>

<script>
function test_click(obj)
{
    if ($(obj[obj.selectedIndex]).hasClass("ClickMe"))
        alert("clicked!");
}
</script>

This will fire an alert when you click at any element with class "ClickMe". You can even assign this behavior to any select you want with jQuery's bind change (in that case function would vary a little not having the argument obj, and using "this" instead of obj at functions body).

Hope this helps

Answer 3

If you want to execute some script when a particular option is selected, you have to get the value and see that what I have required.

$('#labelsList).click(function() {
   if($(this).val == 'somevalue'){
      alert("I have selected the correct option");
   }
});