Невозможно запустить функцию на элементах div, созданных с помощью ajax JSONP

Question

Я создаю несколько делений из некоторых данных JSONP, которые я получаю с сервера.Я пытаюсь запустить простую функцию jquery, чтобы изменить фоновое изображение при нажатии на div, однако, кажется, ничего не происходит, когда я нажимаю на них.Мой код выглядит так:

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>');
 }

Приведенный выше код отображает данные так, как должно, однако, когда я пытаюсь присоединить функцию к классу кнопок, ничего не происходит.Я делаю что-то неправильно?Если я помещаю div на страницу и запускаю функцию, фоновое изображение меняется как следует.Ниже приведена моя функция изменения bg:

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

Любая помощь / совет будет принята с благодарностью.

Answer 1

используйте .on () или .delegate () вместо:

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

Answer 2

Поскольку вы добавляете элемент динамически, вы должны использовать on или delegate для событий, которые будут работать с ними.

Использование delegate()

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

Использование on()

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

Ссылки:

• on() - http://api.jquery.com/on/
• delegate() - http://api.jquery.com/delegate/

Answer 3

Чтобы привязать события к динамически добавляемым элементам, вы должны использовать jQuery's .on() и передавать контекст как:

$('.buttons').on('click', function(evt) { 

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