0

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>

1 respuesta 1

1

Bueno he resuelto varios errores que tenías en el código:

  1. Estas usando una <table> para listar tus elementos, es por tal motivo que en la función agregar() debes agregar elementos de tabla y no divs.

  2. Como el id="toggle" se va a repetir dependiendo la cantidad de filas que tengas debes cambiar el id por class, recuerda que el id es un identificador único e irrepetible en la estructura html (esas son las buenas prácticas)

  3. Como estas añadiendo eventos nuevos al dom éstos no se reconocen al momento de cargar el js (obviamente por que no existen), así que debes cambiar tu selector para que puedan ejecutar su función sin problemas, osea:

en vez de :

    $('.toggle').click(function(){
        // tu codigo
    })

Debes hacer:

$(document).on('click', '.toggle', function () {
    // tu código
})

Acá te dejo el código completo funcional:

$(document).ready(function(){
            $('#bt_add').click(function(){
                agregar();
            });
            $('#bt_del').click(function(){
                eliminar(id_fila_selected);
            });
            $('#bt_delall').click(function(){
                eliminarTodasFilas();
            });
            
    
            $(document).on('click', '.toggle', 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='<tr><td id="fila'+cont+'" >'+cont+' dato </td>' +
            '<td data-class="slide'+cont+'" class="toggle">ver toggle</td>' +
            '<td class="slide'+cont+'" style="display:none;">hola mundo</td></tr>';
            $('#tabla tbody').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>
                <tbody>
                    
                </tbody>
            </table>
            </div>

1
  • no pues si gracias por tu ayuda
    – Shareiv
    el 6 oct. 2017 a las 17:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.