点击处理程序上的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);