點擊某個元素後，如何觸發「聚焦」？

我有以下的標記：點擊某個元素後，如何觸發「聚焦」？

<select style="display:none"> 
    <option value='1'>1</option> 
    <option vlaue='2'>2</option> 
</select> 
<input type="text" id="comboBox" /> 
<ul id="comboBoxData" style="display:none"> 
    <li id='1'>1</li> 
    <li id='2'>2</li> 
</ul>

和下面的jQuery代碼：

$(document).ready(function() { 
    $('select').each(function() { 
     var parent = this; 
     $('#comboBoxData').on('click', 'li', function() { 
      var value = $(this).prop('id'); 
      $(parent).val(value); 
      $('#comboBox').val(value); 
     }); 
    }); 
    $('#comboBox').bind('focusin', function() { 
     $('#comboBoxData').show(); 
    }); 
    $('#comboBox').bind('focusout', function() { 
     $('#comboBoxData').hide(); 
    }); 
});

當我點擊的LI的點擊觸發發生之前的「comboBoxData」元素消失一個。有沒有辦法解決這個問題，或者我可以使用替代事件來獲得與聚焦效果相同的效果？

來源

2012-05-21 William Calleja

'當我點擊了李時珍的「comboBoxData」元素的一個消失之前點擊觸發happens.' 沒看明白。 – Vimalnath

#comboboxdata李有一個點擊事件，因爲聚焦事件發生之前沒有發生 –

戴上了mouseenter和鼠標離開事件，並改變一個全局變量的值，例如依索維爾。

$('select').each(function() { 
    var parent = this; 
    $('#comboBoxData').on('click', 'li', function() { 
     var value = $(this).prop('id'); 
     $(parent).val(value); 
     $('#comboBox').val(value); 
     $('#comboBoxData').hide(); 
    }); 
}); 
$('#comboBoxData').mouseover(function(){ 
    isOver = true; 
}).mouseleave(function(){ 
    isOver = false; 
}); 
$('#comboBox').bind('focusin', function() { 
    $('#comboBoxData').show(); 
}); 
$('#comboBox').bind('focusout', function() { 
    if(!isOver){ 
     $('#comboBoxData').hide(); 
    } 
});

來源

2012-05-21 13:35:54

你不需要這樣的：

$('#comboBox').bind('focusout', function() { 
     $('#comboBoxData').hide(); 
});

如果你是罰款的插件，而不是使用這裏面$('#comboBoxData').on('click', 'li', function() {

，你可以只用這樣的方式：

$('#menu').bind('clickoutside', function (event) { 
    $(this).hide(); 
});

你可以得到該插件 here

此外，我已經改變d，而無需使用插件的代碼：請檢查更新的答案：

DEMO

來源

2012-05-21 12:56:44 Vimalnath

感謝您的建議，我一定會這樣做，但另外我需要它消失也當用戶點擊離開它 –

@William Calleja更新回答 – Vimalnath

@William Calleja讓我知道更新的答案是否適合你？ – Vimalnath

嘗試blur()功能

$('#comboBox').blur(function() { 
     $('#comboBoxData').hide(); 
    });

模糊事件被髮送到時，它失去焦點的元素。

從http://api.jquery.com/blur/

來源

2012-05-21 13:16:57 jbduzan

我嘗試使用模糊來代替，但是發生相同的確切結果，模糊事件發生在點擊事件觸發之前。 –

也許嘗試用#comboBoxData替換#comboBox – jbduzan

不完全優雅，但它的作品。

$("body").click(function(event){ 
    if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox")){  
     $("#comboBoxData").hide(); } 
}); 


$(document).ready(function() { 
    $('select').each(function() { 
     $('#comboBoxData').on('click', 'li', function() { 
     var value = $(this).prop('id'); 
       $('#comboBox').val(value); 
      $('#comboBoxData').hide(); 
     }); 
    }); 

    $('#comboBox').bind('focusin', function() { 
    $('#comboBoxData').show(); 
    }); 
});

來源

2012-05-21 13:51:10 BenSchro10

點擊某個元素後，如何觸發「聚焦」？

回答

相關問題