Hola bueno días gente tengo un problema quiero abrir un toggle pero no me sale el contenido que está dentro del DIV. ¿Por qué me pasa eso?
$(document).ready(function(){
$('#bt_add').click(function(){
agregar();
});
$('#bt_del').click(function(){
eliminar(id_fila_selected);
});
$('#bt_delall').click(function(){
eliminarTodasFilas();
});
$("#toggle").click(function () {
var tog = $(this).attr("data-class");
$("." + tog).slideToggle("fast", function () {
// Animation complete.
});
});
});
var cont=0;
var id_fila_selected=[];
function agregar(){
cont++;
var fila='<div id="fila'+cont+'" >'+cont+' dato </div>' +
'<div data-class="slide'+cont+'" id="toggle">ver toggle</div>' +
'<div class="slide'+cont+'" style="display:none;">hola mundo</div>';
$('#tabla').append(fila);
reordenar();
}
function seleccionar(id_fila){
if($('#'+id_fila).hasClass('seleccionada')){
$('#'+id_fila).removeClass('seleccionada');
}
else{
$('#'+id_fila).addClass('seleccionada');
}
//2702id_fila_selected=id_fila;
id_fila_selected.push(id_fila);
}
function eliminar(id_fila){
/*$('#'+id_fila).remove();
reordenar();*/
for(var i=0; i<id_fila.length; i++){
$('#'+id_fila[i]).remove();
}
reordenar();
}
function reordenar(){
var num=1;
$('#tabla tbody tr').each(function(){
$(this).find('td').eq(0).text(num);
num++;
});
}
function eliminarTodasFilas(){
$('#tabla tbody tr').each(function(){
$(this).remove();
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="content">
<label>Agregar filas de forma dinámica con JQuery</label>
<button id="bt_add" class="btn btn-default">Agregar</button>
<button id="bt_del" class="btn btn-default">Eliminar</button>
<button id="bt_delall" class="btn btn-default">Eliminar todo</button>
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<td>Nº</td>
<td>Descripción</td>
<td>Precio</td>
</tr>
</thead>
</table>
</div>