I am creating a page where you can select products to be able to group them into a list of objects. I need to disable the click event once it is marked as selected.
When I select a product from the list I clone it in a different div, but at the same time I want to highlight it as a selected product but I don't know the way.
At the moment I have this:
layout function
function maquetar_datos(data) {
$('.resultado').empty();
$('.resultado').append('<h2>Resultado</h2>');
if(data.length != 0){
productos = '';
$.each(data,function(index,value){
productos += '<div class="producto-tendencia" style="background:url('+ value.foto +') no-repeat center center; background-size:cover;" producto=' + value.producto +'></div>';
});
}else{
productos = '<div class="resultado-vacio text-center">Esta búsqueda no tiene resultados.</div>';
}
$('.resultado').append($(productos));
};
AJAX search
$(document).on('change','#cat_padre',function(e){
filtro_padre(e.target.value);
$.ajax({
url: '/ajax/obtener_productos_tendencia/',
data:{'cat_padre':e.target.value,
'color':$('#id_color').val(),
'marca':$('#id_marca').val()
},
dataType:'json',
success: function(data){maquetar_datos(data)}
})
});
save product
$(document).on('click','.producto-tendencia',function(e){
producto = $(e.target);
producto.unbind('click');
$('.productos-guardados').append(producto.clone());
});
As you are adding the event handler in
document
, when you do:There is no handler to remove, what you can do is use a class to discriminate by code when to do the cloning or not.
For example:
You can add a .selected or similar class to it with...
...to block the interaction and add whatever you want to highlight it, a border, lower the opacity, etc.