ajaxで作成したdivで関数を実行できませんJSONP

Question

私はサーバーから取得しているJSONPデータからいくつかのdivを作成しています。私はdivをクリックしたときに背景画像を変更する簡単なjquery関数を実行しようとしていますが、何も表示されていないようです。私のコードはそうだ。

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

ご協力いただきまして誠にありがとうございます。代わりに

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

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

Answer 1

使用.on()または.delegate()：

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

Answer 2

あなたはjQueryの.on()を使用してのようなコンテキストを渡す必要があり、動的に要素を追加するためにイベントをバインドするにはイベントを処理するには、onまたはdelegateを使用する必要があります。 - http://api.jquery.com/on/

• on()：on()

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

  参照の使用delegate()

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

  を使用して

  - http://api.jquery.com/delegate/

Answer 3

はあなたが動的に要素を追加しているので