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();
    });