Question

我有两个<p>和一个<div>，并希望事件处理程序在按下第一个 <p>时显示一条消息。我该怎么办呢？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

工作小提琴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>

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

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

点击处理程序上的jQuery事件无效

2 个答案: