Trying to add an on click event in JavaScript/jQuery

Question

I am trying to make a "for" loop that adds a function to each day in a calendar which on click builds a card with lesson descriptions of the current day that was clicked.

My problem is that it builds all the cards of all days in the month the second I load the calendar without waiting for me to click on specific element.

This is part of my code that is relevant for this problem:

for(let i=1;i<=numberOfDays;i++){  //go through all days and building them in a calendar
  $(`ul.days`).append(`
  <li class="day${i}">${i}</li>
  `)
   lessons(date,i); //this just mark the days that have lessons in them
   $(`day${i}`).click(showCard(date,i)); //for each day adds a function
}

Mamun · Accepted Answer · 2018-06-27 14:18:45Z

1

You can use on() to attach event for dynamically created elements. Then call the function inside of an anonymous function like the following:

Change:

$(`day${i}`).click(showCard(date,i));

To

$('ul').on('click', `.day${i}`, function { showCard(date,i) });

edited Jun 27, 2018 at 14:18

answered Jun 27, 2018 at 14:13

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

Comments

Jaime Alvarado Jiménez · Accepted Answer · 2018-06-27 14:04:25Z

0

You have to bind the element with the event

for(let i=1;i<=numberOfDays;i++){  //go through all days and building them in a calendar
  $(`ul.days`).append(`
  <li class="day${i}">${i}</li>
  `)
   lessons(date,i); //this jsut mark the days taht have lessons in them
   $(`day${i}`).bind( "click", function() {showCard(date,i)}); <--//for each day adds a function
}

answered Jun 27, 2018 at 14:04

Jaime Alvarado Jiménez

615 bronze badges

Collectives™ on Stack Overflow

Trying to add an on click event in JavaScript/jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related