jquery - javascript event running when the mouse is over elements created by another function -

this function create_canvas_card() creates box smaller boxes in it. how call function card_mouseover() whenever mouse on 1 of boxes?

 function create_canvas_card(card_data, each_card){//where card_data element/object , each_card int   click_canvas_card_x = 10, click_canvas_card_y = 10;//these set elsewhere   image_id = $(card_data.node).data('card')   click_canvas_cards[each_card] = click_canvas.rect(click_canvas_card_x, click_canvas_card_y, 40, 40).attr('fill', 'url(/images/thumbnails/image'+ image_id +'.jpg)');  //my attempt       $(card_data.node).bind('mouseover', function(e){     var card = cards[$(this).data('card')];     card_mouseover(card);   });  //another attempt //click_canvas_cards[each_card].mouseover(click_canvas_card_mouseover(card_data.node)); } 

which called loop

      for(each_card in cards_to_create_for_click){         var card_data = cards_to_create_for_click[each_card];         create_canvas_card(card_data, each_card);       } 

so far neither's worked.

use raphael's built in element.hover() method.

element.hover

i've made quick little fiddle show in action here

for example, imagine you'd want change function this:

 function create_canvas_card(card_data, each_card){      click_canvas_card_x = 10, click_canvas_card_y = 10;//these set elsewhere      image_id = $(card_data.node).data('card')      click_canvas_cards[each_card] = click_canvas.rect(click_canvas_card_x,      click_canvas_card_y, 40, 40)      .attr('fill', 'url(/images/thumbnails/image'+ image_id +'.jpg)')      .hover(function(){          //do on hover      });