Question

我正在研究jquery代码以使click事件适用于该元素。我在元素上单击时遇到问题，因为尝试这些元素时它不会开始触发：

尝试过：

$('.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块下工作吗？

谢谢。

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

Answer 2

如果要将点击事件监听器仅附加到photo_close3 div，请使用此

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

如果要在整个div上使用它，请

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

Answer 3

在关闭按钮上更改 z-index 。

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>

如何单击div下的元素？

3 个答案: