Helmut Granda » JQuery http://www.helmutgranda.com learning through interaction Mon, 19 Jul 2010 15:01:02 +0000 en hourly 1 http://wordpress.org/?v=3.0 JQuery and dynamic elements http://www.helmutgranda.com/2009/04/16/jquery-and-dynamic-elements/ http://www.helmutgranda.com/2009/04/16/jquery-and-dynamic-elements/#comments Fri, 17 Apr 2009 03:46:53 +0000 Helmut Granda http://www.helmutgranda.com/?p=314 I have been working with JQuery on a couple of work and personal projects and I really like the library. One of my first challenges was to access elements dynamically and at the same time trigger custom events. This is specially necessary when working with elements where you don't know the source of the data in detail.

Here is a sample as a reference:

JavaScript:
    $(document).ready(function() {
             
             var idTotal = 5;
             
             for ( var i = 1 ; i < idTotal ; i++)
             {
                var deleteMinutes = $("#deleteMinutes_"+i);
                attachEvents ( deleteMinutes ) ;
                
                var updateMinutes = $("#updateMinutes_"+i);
                attachEvents ( updateMinutes ) ;
             }
             
           });
          
          var globalID;
          
          function attachEvents ( $item )
          {
             $item.bind("click",       clickHandler );
             $item.bind("mouseenter",    hoverHandler );
             $item.bind("mouseleave",    mouseleaveHandler );
             $item.bind("mousedown", mousedownHandler );
             $item.bind("mouseup",    mouseupHandler );   
          }
          
          function clickHandler ( $event )
          {
             var target = $event.target.id;
             var id = target.charAt(target.length-1);
             globalID = id;
             $('#dialog').dialog('open');
          }
          
          function hoverHandler ( )
          {
                $(this).addClass("ui-state-hover");
          }
          
          function mouseleaveHandler ( )
          {
             $(this).removeClass("ui-state-hover");
          }
          
          function mousedownHandler ( )
          {
             $(this).addClass("ui-state-active");
          }
          
          function mouseupHandler ( )
          {
             $(this).removeClass("ui-state-active");
          }
          
          function deleteItemSelected ( )
          {
             $("#minutes_"+globalID).remove();
          }
]]> http://www.helmutgranda.com/2009/04/16/jquery-and-dynamic-elements/feed/ 0