2012-01-26 6 views
0
$(document).ready(function() { 
$('#username_input').live("focus", function() { 
      $('.user-available-info').hide(); 
      $('.user-available-error').hide(); 
      $('.login-error').hide(); 
    }); 
    $('#password_input').live("focus", function() { 
      $('.login-error').hide(); 
      $('#login-username-invalid').hide(); 
      $('#login-username-error').hide(); 
     }); 
    This is the xhtml page 
    <h:panelGroup id="login-username-invalid" > 
    <div id="login-username-invalid-error">  
       <div class="login-error"> 
        <div class="login-error-top"></div> 
        <div class="login-error-middle"> 

    <p class="error"> 
    "message to be displayed in the bubble"</P> 

私たちのアプリケーションにはログインページがあり、ユーザが無効なユーザ名またはパスワードを入力するとエラーバブルがポップアップします。ユーザーがページ上の任意の場所をクリックすると、バブルが終了する必要があります。ユーザー名とパスワードの両方の入力フィールドで正常に動作します。上のコードに記載されているように.hideを指定しています。しかし、フィールド全体をページ上で動作させるためにフィールドIDを 'body'に入力してください。しかし、決してうまくいかなかった.clickと.bindのどちらもうまく動作しませんでした。それには何か解決策がありますか.です。ページ上のどこかをクリックするとバブルが閉じるはずです

答えて

2

体上のクリックではなく、焦点にバインド:。。http://jsfiddle.net/brentmn/QDjSV/1/

$('body').on('focus', function(){ 
    alert('body does not recieve focus'); 
}); 
$('body').on('click', function(){ 
    alert('body does recieve click'); 
}); 
+0

ので、$( '体')( 'クリック'、機能(){ $(」。bubbleclass')には非表示();});この作業を正しく行うことができます。また、ページ上のどこかをクリックするとバブルを隠すことになります。 – user1046671

+0

はい。注意すべき2つのこと。 htmlとbodyのCSSの高さと幅は100%でなければなりません。また、ユーザーがバブル自体をクリックするケースも必ず処理してください。 $( '。bubbleclass')。on( 'click'、function(){return false;});あなたはおそらくそれを閉じたくはないでしょう。それ以外の場合は、クリックがボディまで「バブル」し、「あなたの」バブルを閉じます。 –

+0

ブレントのお返事ありがとうございます。 – user1046671

関連する問題