追加后点击事件 Jquery
Click event after append Jquery
我正在玩一些 Jquery、json 和 Ajax。
如果 fa-plus 被点击,它需要消失,而 fa-mines 需要显示。
问题是它什么也没做。甚至 console.log('clicked')
我已经准备好文件并且:$(document).on('click', '.open', function() {}
我迷路了..希望你们能帮忙。
$(document).ready(function(){
Cocktail.getAll().done(function(data){
var list = $('.list-group');
for (var i = 0; i < data.cocktails.length; i++) {
list.append('<li class="list-group-item"><h3>' + data.cocktails[i].name + '</h3><i class="fa fa-plus"><i class="fa fa-minus hide"></i>');
}
}).fail(function(data){
console.warn('fetching failed');
console.warn(data);
}).always(function(){
console.log('this is what I always do');
});
var open = $('.fa-plus');
var close = $('.fa-minus');
$(document).on('click', '.open', function() {
console.log('clicked');
$(this).addClass('hide');
close.removeClass('hide');
});
});
无需维护两个元素,只需更新单个元素上的 class。那么你不需要显示/隐藏。
$(document).on('click', '.fa', function() {
$(this).toggleClass("fa-plus fa-minus");
});
我正在玩一些 Jquery、json 和 Ajax。
如果 fa-plus 被点击,它需要消失,而 fa-mines 需要显示。 问题是它什么也没做。甚至 console.log('clicked')
我已经准备好文件并且:$(document).on('click', '.open', function() {}
我迷路了..希望你们能帮忙。
$(document).ready(function(){
Cocktail.getAll().done(function(data){
var list = $('.list-group');
for (var i = 0; i < data.cocktails.length; i++) {
list.append('<li class="list-group-item"><h3>' + data.cocktails[i].name + '</h3><i class="fa fa-plus"><i class="fa fa-minus hide"></i>');
}
}).fail(function(data){
console.warn('fetching failed');
console.warn(data);
}).always(function(){
console.log('this is what I always do');
});
var open = $('.fa-plus');
var close = $('.fa-minus');
$(document).on('click', '.open', function() {
console.log('clicked');
$(this).addClass('hide');
close.removeClass('hide');
});
});
无需维护两个元素,只需更新单个元素上的 class。那么你不需要显示/隐藏。
$(document).on('click', '.fa', function() {
$(this).toggleClass("fa-plus fa-minus");
});