jquery hover on dialog

Question

<div id="view"></div>
<div class="bar" style="padding:0px;" id="bar">
    <script>
       var bar = '<img class="myclass" src="button.png" >&nbsp&nbsp' ;
       $view = jQuery('#view') ;
       $view.dialog({ 
          height: 650, 
          width: 650, 
          buttons: { "welcome" :        
             function() { msg() ; } 
          },
          open: function(event, ui) 
           { if (full_toggle == 1) 
             {             
                $bar.dialog('open') ;
             } 
            }
          }) ;
        bar = $(".bar", "#view").dialog({ 
                 height: 30, 
                 width: '100%',
                 textAlign : "justify",  
                 marginLeft : "auto",
                 marginRight:"auto"
         })
    </script>
</div>

In the above script since bar is a dialog how can i do a hover or mouseover property on bar

Answer 1

How about this:

 $('.myclass').mouseover(function(){
   // whatever....
 });

Or

 $('.myclass').hover(function(){
   // whatever....
 });

Answer 2

You don't need to mix javascript code with HTML. you can put it on the HEAD section inside $(function(){}); like the bellow code.

$(function(){
     $('.bar').hover(
        function(){ alert('Hover!'); },
        function(){ alert('Hover Out!'); }
     );
});

---

after saw your updated the question about the dialog:

jQuery UI dialog render some html. I suggest you hook in into the html that you want to hover.

For example:

$('.ui-dialog').live('hover', function(){ alert('Hover!'); } );

You can also use:

$view.dialog({
       open: function(){ 
            $('.ui-dialog').hover( function(){ alert('Hover!'); } });
       }
});

Look here for additional resource.

Answer 3

 $('#bar').hover(function(){ 
        alert('I was hovered...'); 
        //function code here...
    },
    function(){ 
        alert('No longer hovered...'); 
        //function code here...
    }
 });

I would also recommend modifying your code a bit... Its cleaner to read if you put all of the HTML elements in there such as your image and then at the bottom of the page, place your document ready jQuery code that initializes all of the other items like dialogues, etc. Placing JavaScript at the bottom of your page will improve load times.