Question

我正在使用jQuery 1.7.2。最初，我的HTML是在页面加载时呈现的：

<div class="my_div_class">
  <button class="my_button_class" >
  </button>
<div>

然后我在JavaScript函数下面注册：

$(".my_div_class").on('click', function(event){ //function_1
}

工作正常。

由于某种原因，我需要将其更改为

$(document).on('click','.my_div_class', function(event){}

然后它不工作？但如果改变以上功能使用my_button_class则可行。为什么不使用div？

Answer 1

$(document).ready(function() {
    $(document).on("click",".my_div_class",function(event) {
        alert("Heyy! clicked me!");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="my_div_class">
  <button class="my_button_class" >
  </button>
<div>

Answer 2

您可以使用$(event.target).closest(".my_div_class").length == 1查看您是否点击了my_div_class或其中的任何元素。

$(document).on('click', function(event) {
  if ($(event.target).closest(".my_div_class").length == 1) {
    console.log("clicked on button or div")
  } else {
    console.log("clicked outside")
  }
})

<强>演示

$(document).on('click', function(event) {
  if ($(event.target).closest(".my_div_class").length == 1) {
    console.log("clicked on button or div")
  } else {
    console.log("clicked outside")
  }
})

.my_div_class {
width:200px;
background-color:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div_class">
  <button class="my_button_class">click
  </button>
  <div>

单击div类时不调用函数？

2 个答案: