Question

我正在从服务器检索的一些JSONP数据中创建一些div。我正在尝试运行一个简单的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

要将事件绑定到动态添加的元素，您应该使用jQuery的.on()并传递上下文，如：

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

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

Answer 3

由于您要动态添加元素，因此您应该使用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/

无法在使用ajax JSONP创建的div上运行函数

3 个答案: