Как вызвать событие фокусировки на элемент ul?

Question

У меня есть плагин, который меняет внешний вид тега select html во всем браузере.

Я пытаюсь создать новый стиль элементов, как обычный тег select. Я почти там, но мне нужно всего лишь разобраться, и вот как скрыть ul на фокусе.

Во-первых, здесь демо нового выбора элемента (не на английском языке, но вы можете найти его легко ^^): http://mahersalam.co.cc/projects/n-beta/

При нажатии на кнопку включенности выбора элемента, а затем нажмите кнопку, элемент ul, который имеет параметры, не исчезнет. Это потому, что я не могу запустить событие focusout на этом ul.

Вот код, который определяет, как события обрабатываются:

// Make a div which will be used offline and then inserted to the DOM 
$namodgSelect = $('<div class="namodg-select"></div>'); 

/* other stuff ... */ 

$namodgSelect // Handle all needed events from the wrapper 
    .delegate('a', 'click focus blur', function(e) { 

     // Type of the event 
     var type = e.type, 

     // Declare other vars 
      id, 
      $this; 

     e.preventDefault(); // Stop default action 

     // Make an id ot the element using it's tag name and it's class name 
     // Note: Because we add a class on the active toggler, it's easier to remove it from here and the logic will still work 
     id = e.target.tagName.toLowerCase() + '.' + e.target.className.replace(' toggler-active', ''); 

     switch (id) { 

      case 'p.selected': case 'div.toggle-button': 

       // Only accept 'click' on p and div 
       if (type != 'click') { 
        return; 
       } 

       // Show and hide the options holder 
       if ($optionsHolder.data('hidden')) { 

        $selectElem.focus(); 

        // This needs to run fast to give feedback to the user 
        $toggler.addClass('toggler-active').data('active', true); 

        // Show the options div 
        $optionsHolder.stop(true, true).slideDown('fast', function() { 

         // Sometimes fast clicking makes the toggler deavtive, so show it in that case 
         if (! $toggler.data('active')) { 
          $toggler.addClass('toggler-active').data('active', true); 
         } 

        }).data('hidden', false); 

       } else { 

        $selectElem.blur(); 

        // Hide the options div 
        $optionsHolder.stop(true, true).slideUp(function() { 

         // Only hide the toggler if it's active 
         if ($toggler.data('active')) { 
          $toggler.removeClass('toggler-active').data('active', false); 
         } 

        }).data('hidden', true); 

       } 
       break; 

      case 'a.toggler': 
       switch (type) { 
        case 'focusin': 
         $selectElem.focus(); 
         break; 
        case 'focusout': 
         // Only blur when the options div is deactive 
         if ($optionsHolder.data('hidden')) { 
          $selectElem.blur(); 
         } 
         break; 
        case 'click': 
         $selectedHolder.click(); 
         $selectElem.focus(); 
       } 
       break; 

      case 'a.option': 
       // Stop accept click events 
       if (type != 'click') { 
        return; 
       } 

       // cache this element 
       $this = $(this); 

       // Change the value of the selected option and trigger a change event 
       $selectedOption.val($this.data('value')).change(); 

       // Change the text of the fake select and trigger a click on it 
       $selectedHolder.text($this.text()).click(); 
       break; 
     } 
    }) 

Весь код можно увидеть из демки. Как вы можете видеть, я уже использую событие focusout на переключателе и параметрах, поэтому я не могу скрыть ul, когда это произойдет (это отключит функциональность вкладки).

Если кто-нибудь может помочь мне с этим, он будет оценен. Благодарю.

Answer 1

Я был в состоянии скрыть панель параметров, используя этот код:

$(document).click(function() { 
    if ($optionsHolder.data('hidden') || $optionsHolder.is(':animated')) { 
     return; 
    } 
    $selectedHolder.click(); 
}) 

Это работает потому, что фокусировка на другой вход как щелчок на document.

Answer 2

Попробуйте воспользоваться одним из jQuery outside events plugin позволит вам сделать что-то вроде:

$(this).bind("clickoutside", function(event){ 
    $(this).hide(); 
});