Question

i am creating a few divs from some JSONP data that i am retrieving from a server. I am trying to run a simple jquery function to change the background image when the divs are clicked, however, nothing seems to be happening when i click them. My code looks like so;

success: function(data){
 console.log(data);
 for(aArray in data)  {
 var array = data[aArray];
 $("#first").append('<p>' + array.something + '</p>');
 $("#second").append('<div class="buttons btn"><p>' + array.something + '</p></div>');
 $("#third").append('<div class="buttons btn"><p>' + array.something + '</p></div>');
 $("#fourth").append('<div class="buttons btn"><p>' + array.something + '</p></div>');
 }

The code above displays the data as it should, however, when i try to attach a function to the buttons class nothing happens. Am i doing something wrong? If i put a div on the page and run the function, the background-image changes as it should. The following is my change bg function;

$(".buttons").click(function()   {
$(this).removeClass("buttons").addClass("buttonsDown");
});

Any help/advice would be greatly appreciated.

Answer 1

use .on() or .delegate() instead:

$(document).on('click', '.buttons', function() { 
  $(this).removeClass("buttons").addClass("buttonsDown");
});