CODEWITHSUNDEEP
javascriptjquery
Robert Jones
Robert Jones

Reputation: 408

How to click the element under div?

I am working on the jquery code to get the click event to work for the element. I have got a problem with click on the element because it wont start to fire when I tried these:

Tried this:

$('.photo_dialog_toolbar').on('click','#photo_close3', function() {
    alert("here 3");
});

Tried this different way:

$(document).on('click','#photo_close3',function() {
    alert("here 2");
});

And I also tried this:

$(document).on('click','#photo_close3, .photo_dialog_toolbar',function() {
    alert("here 2");
});

Nothing has been working what I have tried so far. It should works when I tried this but it didn't.

$(document).on('click','#photo_close3',function() {
    alert("here 2");
});

Here is the full code:

    <div id="photo_dialog" class="aLF-aPX-bhP" tabindex="0" role="dialog" aria-label="Showing viewer." style="display: none; width: 100%; height: 97.7%; padding: 10px 0 10px 0; position: absolute; top: 0; left: 0; z-index: 3; outline: none;">
        <div class="photo_dialog_toolbar" role="toolbar" style="opacity: 1;">
           <div class="aLF-aPX-aPU-a6z" style="left: 12px;">
              <div class="aLF-aPX-Jq-I aLF-aPX-auO-I J-J5-Ji aLF-aPX-I" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="aLF-aPX-T-ays" data-toggle="tooltip" data-placement="bottom" title="Close" style="user-select: none;display: inline-block;"> 
                   <div id="photo_close3" class="aLF-aPX-JX aLF-aPX-Km-JX" style="display: inline-block;">
                   </div>
               </div>
           </div>
       </div>
   </div>

Can you please show me an example how I can get the element click event to work under the div blocks when I click on the close button?

Thank you.

Upvotes: 0

Views: 101

Answers (3)

Bibberty
Bibberty

Reputation: 4768

Change z-index on the close button.

document.addEventListener('click', ({target}) => {
  console.log(`Clicked - ${target.id}`);
});
<div id="photo_dialog" class="aLF-aPX-bhP" tabindex="0" role="dialog" aria-label="Showing viewer." style="width: 100%; height: 97.7%; padding: 10px 0 10px 0; position: absolute; top: 0; left: 0; z-index: 3; outline: none;">Outer
  <div class="photo_dialog_toolbar" role="toolbar" style="opacity: 1;">Inner 1
    <div class="aLF-aPX-aPU-a6z" style="left: 12px;">Inner 2
      <div class="aLF-aPX-Jq-I aLF-aPX-auO-I J-J5-Ji aLF-aPX-I" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="aLF-aPX-T-ays" data-toggle="tooltip" data-placement="bottom" title="Close" style="user-select: none;display: inline-block;">Inner 3
        <div id="photo_close3" class="aLF-aPX-JX aLF-aPX-Km-JX" style="display: inline-block;z-index: 4">Close
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Shaurya Vardhan Singh
Shaurya Vardhan Singh

Reputation: 684

Use this if you wanna attach click event listener to only photo_close3 div

$( "#photo_close3" ).click(function() {
  alert( "Here2" );
});

If you want to use it on whole div use

$( ".photo_dialog_toolbar" ).click(function() {
  alert( "Here2" );
});

Upvotes: 0

Siri
Siri

Reputation: 1126

<div id="photo_dialog" class="aLF-aPX-bhP" tabindex="0" role="dialog" aria-label="Showing viewer." style="width: 100%; height: 97.7%; padding: 10px 0 10px 0; position: absolute; top: 0; left: 0; z-index: 3; outline: none;">
  <div class="photo_dialog_toolbar" role="toolbar" style="opacity: 1;">
    <div class="aLF-aPX-aPU-a6z" style="left: 12px;">
      <div class="aLF-aPX-Jq-I aLF-aPX-auO-I J-J5-Ji aLF-aPX-I" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="aLF-aPX-T-ays" data-toggle="tooltip" data-placement="bottom" title="Close" style="user-select: none;display: inline-block;">
        <div id="photo_close3" class="aLF-aPX-JX aLF-aPX-Km-JX" style="display: inline-block;">
        </div>
      </div>
    </div>
  </div>
</div>

Javascript

$(document).ready(function() {
  $('.photo_dialog_toolbar').click(function() {
    alert("clicked");
  });
});

Upvotes: 1

Related Questions