Detecting click on inner div with event.target

Question

I have an accordion that when it is clicked (the whole element) it triggers and displays the inner items. I want to be able to add an accordion inside of one of the inner items, so I'm using event.target to see where the click happens. For some reason, event.target detects the click on an inner paragraph, but not on it's wrapper div? What is the reason of this?

$(".gestion-accordion-wrap").on("click", function(event){

      var $target = $( event.target );

      if ( $target.is ( $(".gestion-inner-wrap p") ) ){

        var $innerWrap = $(".gestion-inner-wrap p").parent().parent();

        $innerWrap.children().eq(1).slideToggle(300); 
        $innerWrap.find(".mas-detalles-clickable-inner").toggleClass("clickable-spin");
        $innerWrap.find(".mas-detalles-after-inner").toggle();
        $innerWrap.find(".menos-detalles-after-inner").toggle();

        $innerWrap.find(".span-left-line").toggleClass("left-line-grow");

      } else {

  $(this).children().eq(1).slideToggle(300); 
  $(this).find(".mas-detalles-clickable").toggleClass("clickable-spin");
  $(this).find(".mas-detalles-after").toggle();
  $(this).find(".menos-detalles-after").toggle();
  $(this).find(".span-left-line").toggleClass("left-line-grow");
}})

Why is this detected:

if ( $target.is ( $(".gestion-inner-wrap p") ) ){

But not this?

if ( $target.is ( $(".gestion-inner-wrap") ) ){

(NOTE : There's no p in this selector)

Can't you just use .onclick – McMuffinDK Oct 02 '17 at 10:08 — McMuffinDK, Oct 02 '17 at 10:08
Can you post your HTML, at least the structure? – krlzlx Oct 02 '17 at 10:26 — krlzlx, Oct 02 '17 at 10:26

Vinay · Answer 1 · 2017-10-02T10:35:23.760

0

This is the way DOM works ! .

target property is intended to match only that exact element on which a given event occurs , the handler which caught the event doesn't matter.What you need instead is currentTarget property.

currentTarget

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.

$(".gestion-accordion-wrap").on("click",'*',  function(event){

  var $target = $( event.currentTarget );
  alert( $target.is ( $(".gestion-inner-wrap") ) ); // TRUE

}

https://jsfiddle.net/mbzp2xcp/

edited Oct 02 '17 at 10:35

answered Oct 02 '17 at 10:28

Vinay

7,442
6
25
48

I am not clear with the html can you post barebones html? Try adding '*' in `on()` see edit – Vinay Oct 02 '17 at 10:33
I agree that it sounds like `currentTarget` is the appropriate solution. It's going to be hard to figure out why that isn't working without being able to reproduce the problem interactively. – Seth Holladay Oct 02 '17 at 10:53
Ye unless he posts some fiddle or something it would be hard to exactly tell what the issue – Vinay Oct 02 '17 at 10:59

Detecting click on inner div with event.target

1 Answers1