jQuery event on click handler not working

Question

I have two two <p> and one <div> and want event handler to display a message when the first <p> is pressed. How can I pull that off?

$("#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>

why not use ID newCategoryButton?$("#menu").on('click','#newCategoryButton',pullInput);? — guradio
– guradio, Commented Jan 9, 2017 at 6:51
@guradio is right. Or even more simple - $("#newCategoryButton").on("click", pullInput ); — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jan 9, 2017 at 6:54
The paragraphs elements have opacity 0 first and when I press a button they have opacity 1,maiby they act like dinamicaly created elements because none of the examples are working.The only one is this "$("#menu").on('click','p',pullInput);" but it gets both of the paragraphs — S. Georgian
– S. Georgian, Commented Jan 9, 2017 at 6:59

Advaith · Accepted Answer · 2017-01-09 07:02:36Z

4

Your selector is wrong. Update your selector like this

$("#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>

Working fiddle https://jsfiddle.net/9amv3vmh/

edited Jan 9, 2017 at 7:02

Advaith

2,5903 gold badges23 silver badges38 bronze badges

answered Jan 9, 2017 at 6:52

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S. Georgian Over a year ago

The paragraphs elements have opacity 0 first and when I press a button they have opacity 1,maiby they act like dinamicaly created elements because none of the examples are working.The only one is this "$("#menu").on('click','p',pullInput);" but it gets both of the paragraphs

Kiran Shinde Over a year ago

Can you show us the fiddle... i mean including the button, on clicking which opacity changes

Satpal · Accepted Answer · 2017-01-09 06:51:30Z

1

You need to use :first-child selector with p element.

$("#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>

However as you have sepecified ID with p element use it to bind event handler.

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

answered Jan 9, 2017 at 6:51

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

S. Georgian Over a year ago

The paragraphs elements have opacity 0 first and when I press a button they have opacity 1,maiby they act like dinamicaly created elements because none of the examples are working.The only one is this "$("#menu").on('click','p',pullInput);" but it gets both of the paragraphs

Satpal Over a year ago

@S.Georgian, Can you create Fiddle or snippet to show the issue?

Collectives™ on Stack Overflow

jQuery event on click handler not working

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related