javascript - 如何点击div下的元素？

Question

我正在编写 jquery 代码以使单击事件适用于该元素。我在单击元素时遇到问题，因为当我尝试以下操作时它不会开始触发:

尝试过这个:

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

尝试了这种不同的方式:

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

我也尝试过这个:

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

到目前为止，我所尝试的一切都不起作用。当我尝试这个时它应该可以工作，但没有。

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

完整代码如下:

    <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>

您能否向我展示一个示例，当我单击关闭按钮时，如何让元素单击事件在 div block 下工作？

谢谢。

Answer 1

<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");
  });
});