Hello I have seen similar posts but none answer what I want to acplish I made a sample here /

What i basically want is when a click happens in the parent you get the id of the child and store it in a variable so i can pass the variable currentID to the code below otherwise I will have to replicate this code 9 times for each id from box1 to box9

 jQuery(currentID).delegate("a", "hover", function(event){

        var $img = jQuery(this).parent("li").find('img');
        var image = jQuery(this).attr('data-img');
         jQuery('.defaultimg').stop(true, true).fadeOut();
        if( event.type === 'mouseenter' ) {

            if($img.length){
                $img.show();

            }else{
                jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
            }

        }else{
            if($img){
              $img.hide();  
            }
             jQuery('.defaultimg').stop(true, true).fadeIn();
        }
    });
});

Hello I have seen similar posts but none answer what I want to acplish I made a sample here http://jsfiddle/edgardo400/R6rVJ/

What i basically want is when a click happens in the parent you get the id of the child and store it in a variable so i can pass the variable currentID to the code below otherwise I will have to replicate this code 9 times for each id from box1 to box9

 jQuery(currentID).delegate("a", "hover", function(event){

        var $img = jQuery(this).parent("li").find('img');
        var image = jQuery(this).attr('data-img');
         jQuery('.defaultimg').stop(true, true).fadeOut();
        if( event.type === 'mouseenter' ) {

            if($img.length){
                $img.show();

            }else{
                jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
            }

        }else{
            if($img){
              $img.hide();  
            }
             jQuery('.defaultimg').stop(true, true).fadeIn();
        }
    });
});

• javascript
• jquery-ui
• jquery-selectors
• jquery

• If the click event occurs outside the bounds of the child(ren) element(s), how should this system decide which child id to show? – David Thomas Commented Apr 22, 2012 at 17:09
• 1 Did you know that you only have to write jQuery in its long form once? By wrapping your code in (function($) { .... })(jQuery);, you can use $ no matter if noConflict has been used or not. – ThiefMaster Commented Apr 22, 2012 at 17:12
• Sorry if not clear the system will know because it is the children that is clicked I just want the system to tell me the id of what child was clicked and from there do the events based on that id i have a working model here well when I say the id anyways testdomain.edgardoroldanonline./apple-power you can see it working in poison control – Edgardo Roldan Commented Apr 22, 2012 at 17:23

3 Answers 3

$('#boxes').on('click', function(e) {
    var currentID = e.target.id;
    console.log(currentID);

......rest of code

In javascript it would be:

var a = document.getElementById('#boxes');
a.onclick = function(e){
    console.log(e.target.id);
}

If you only wish to make your code working and displaying on your console the box name, you should probably set

jQuery('#boxes').bind('click', function(event) {

     var currentID = jQuery(event.srcElement).attr('id');

     /* rest of your code */
});

You might want to do something easier

jQuery('#boxes').children().bind('click', function() {

   jQuery(this).delegate... 

});

Although I'm not sure why you are doing this ...

fixed http://jsfiddle/nxTDA/