Avatar of sniger
sniger

asked on 

mouseout is not working as expected

I'm dynamically generating a list of checkboxes, I want this to dissapear as soon as I mouse out, but it dissapears
when I move my mouse out of Fldsbutt

<div class="container" id = "container"> 
        <div class="form-group">         
                <label for="selfile" class="col-sm-2 control-label">  Select File </label>  
                        
                <?php
                
                    $options = generate_files();
                    echo '<select id="selfile" name="selfile">'.$options.'</select>';                    	        
                ?>
              
        </div>
       
       
          <div class="form-group"  id="fieldsdiv" >         
              <label for="selfile" class="col-sm-2 control-label">  Fields </label> 

        	
        	 			   
        	    <button id="Fldsbutt"  class = "multiSelect ui-widget sd ca"  type="button"  tabindex = "0" style="width:225px;">
        	    
            	     <span class="ui-icon ui-icon-triangle-2-n-s"></span>
            	     <span id="Pstext" class= "ui-text"> </span>
            	     
        	     </button>    <span id="pleaseWait"> </span>
        	     
            	    <div id="selfields" class="multiSelectOptions">
            	    	    
            	    </div> 	
        	     	
        	    <span id="Pss">     </span> 		 		   		 		
             </div>		  	  	 	 	  	 	  		 		  	  										
 	 
          
        
              
          
       
            
                         
    
            
      </div>      
   
   <script>


   
   var base_url = '<?php echo site_url() ?>';
   var controller = 'gen';
   var method = 'mixed';

    $(function() {	
	   $('#selfile'). change(function() {
			 
		   var $file = $('#selfile').val();
		      		      
		      if($file !== undefined)
		      {
		    		
		    	     var	 $path = $file;    
  		    	        		    	   	    	    			     
  		    	 $.ajax({							
  						url: base_url+'/'+ controller +'/' + method,
  						type: "POST",
  						data: {
  							file: $path,
  							},
  						success: function(ret_data) {
      						if (ret_data != 'error')
      						{	
      							$('#pleaseWait').html('Click the arrow to select fields');
      						    $('#selfields').html(ret_data);
      						    $('#selfields').hide();
      					     } 

      						else  	$('#pleaseWait').html('');
  						}			
  						}); 
		      }	    });
		
		
		$('#selfields').mouseout(function() {
			    console.log('mouseout');
			    $('#selfields').hide();
							

			});
		    	    

		$('#Fldsbutt'). click(function() {
	 
		    $('#selfields').show();
		    
		   });  		
		});	
		
	       
  </script> 
  
 </body>
 </html>  

Open in new window

jQueryJavaScript

Avatar of undefined
Last Comment
Alexandre Simões
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo