点击处理程序上的 jQuery 事件不起作用

Question

我有两个两个<p>和一个<div>，并希望事件处理程序在按下第一个<p>时显示一条消息。我怎样才能做到这一点？

$("#menu:first-child").on('click', 'p', pullInput);
function pullInput() {
  console.log("da");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <p id="newCategoryButton">New category</p>
  <p>New Song</p>
</div>

Answer 1

您的选择器错误。像这样更新您的选择器

$("#menu p:first-child").on('click', pullInput);
function pullInput(){
  console.log("HI!");
}
     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <p id="newCategoryButton">New category</p>
  <p>New Song</p>
</div>

工作小提琴 https://jsfiddle.net/9amv3vmh/

Answer 2

您需要

将:first-child选择器与p元素一起使用。

$("#menu").on('click','p:first-child',pullInput);

$("#menu").on('click', 'p:first-child', pullInput);
function pullInput() {
  console.log("da");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <p id="newCategoryButton">New category</p>
  <p>New Song</p>
</div>

---

但是，由于您已经使用p元素分隔了ID，因此使用它来绑定事件处理程序。

$("#newCategoryButton").on('click', pullInput);