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

我从一些从服务器检索的JSONP数据创建了几个div。我试图运行一个简单的jquery函数来更改背景图像，当div被点击时，但是，当我点击它们时，似乎没有任何事情发生。我的代码看起来像这样;无法在使用ajax创建的div上运行函数JSONP

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

任何帮助/建议将不胜感激。

来源

2012-03-23 JPK

使用.on()或.delegate()代替：

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

来源

2012-03-23 14:21:29 Vytautas

这工作完美，经过一些研究似乎是我后面的一个。非常感谢您的信息！ – JPK 2012-03-23 14:26:34

答案中的代码（发布后编辑）在功能上与问题中的代码完全相同。如果要使用on（），则需要使用在非动态生成的元素上调用的事件委托样式，并为触发回调函数的子元素选择一个选择器。 – 2012-03-23 14:43:24

对不起，我把'.live（）'换成了'.on（）'，因为'.live（）'被弃用了，并且'.on（） – Vytautas 2012-03-23 14:48:29

绑定到动态添加元素的活动，你应该使用jQuery的.on()，并通过上下文，如：

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

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

来源

2012-03-23 14:20:32

你忘了传递上下文。 – nnnnnn 2012-03-23 14:22:40

你既然是动态追加的要素您应该使用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/

来源

2012-03-23 14:23:23 ShankarSangoli

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

回答

相关问题