Ordenar tabla despues de añadir elemento dinamicamente

[mawilin]

Buenas, tengo el siguiente problema:

tengo una tabla sortable a la que puedo añadirle elementos de forma dinamica, el problema que cuando ordeno la tabla la ordenación no afecta a los elementos añadidos de forma dinamica. ¿Como puedo hacer para que la ordenación afecte a todos los elementos?

Gracias.

[chichote]

para captar el evento de un elemento cargado dinamicamente debes utilizar on o delegate, antiguamente existia live.

Saludos.

[mawilin]

hola, podrias darme mas info sobre como hacerlo.
Gracias

[mawilin]

asi es como lo tengo hasta ahora, en mi archivo js me creo una nueva fila y la inserto al principio de la tabla de esta manera:

Código:

var strNueva_Fila='<tr id="fila'+numeroPunto+'">'+
                    '<td>'+numeroPunto+'</td>'+
                    '<td>'+descripcionPunto+'</td>'+
                    '<td><input type="button" value="Modificar" onClick="modificarPunto('+numeroPunto+','+temp+','+1+')"></td>'+
                    '<td><input type="button" value="Borrar" onClick="eliminarPunto('+numeroPunto+')"></td>'+
                    '</tr>';
            
                $('#tablaPuntos').find('tbody').prepend(strNueva_Fila);

No sé como he de utilizar los metodos on ni delegate

[chichote]

Revisa lo siguiente

Código:

<script>
	var strNueva_Fila='<tr id="fila'+numeroPunto+'">'+
                    '<td>'+numeroPunto+'</td>'+
                    '<td>'+descripcionPunto+'</td>'+
                    '<td><input type="button" class="modificar" value="Modificar" data-var1="'+numeroPunto+'" data-var2="'+temp+'" data-var3="'+1+'"></td>'+
                    '<td><input type="button" class="borrar" value="Borrar" data-var1="'+numeroPunto+'"></td>'+
                    '</tr>';
            
                $('#tablaPuntos').find('tbody').prepend(strNueva_Fila);
</script>

Código:

<script>
	$(function(){
		$("table").on( "click", ".modificar", function(){
			var var1 = $(this).data("var1");
			var var2 = $(this).data("var2");
			var var3 = $(this).data("var3");
			
			// Aca todo lo que sigue
		});
	});
</script>

Saludos

[mawilin]

A ver esta seria mi funcion completa con los cambioas que me dices

Código:

function agregar(){//Agrega los puntos de agua
    
    function siRespuesta(r){
       
       
       
       //ok=0;
	if(r==0){
	jAlert("El numero de ese punto ya existe!","Agregar Puntos");
        }
        else {if(r==1){
            
            
            
        var numeroPunto = $('#numero').val();
	var descripcionPunto = $('#descrip').val();
        var temp = "\'"+descripcionPunto+"\'";
        

        var strNueva_Fila='<tr id="fila'+numeroPunto+'">'+
                    '<td>'+numeroPunto+'</td>'+
                    '<td>'+descripcionPunto+'</td>'+
                    '<td><input type="button" class="modificar" value="Modificar" data-var1="'+numeroPunto+'" data-var2="'+temp+'" data-var3="'+1+'"></td>'+
                    '<td><input type="button" class="borrar" value="Borrar" data-var1="'+numeroPunto+'"></td>'+
                    '</tr>';
            
                $('#tablaPuntos').find('tbody').prepend(strNueva_Fila);
        $('#numero').val('');
        $('#descrip').val('');
        
        
        jAlert("Punto Agregado Correctamente","Agregar Puntos");
	
            }else jAlert(validar(parseInt(r)),"Agregar Puntos");
        }
    }

    function siError(e){
        alert('Ocurrio un error '+e.statusText);
    }

        // Obtener valores de los campos de texto
        var parametros = {
           numero : $('#numero').val(),
           descripcion: $('#descrip').val()
        };
 
    	var post = $.post(
                              "http://localhost/Proyecto/crearControl/agregarPunto",    // Script que se ejecuta en el servidor
    	                      parametros,    	                       
    	                      siRespuesta,    // Función que se ejecuta cuando el servidor responde
    	                      'html'          // Tipo de respuesta del servidor
                              );
 
    	post.error(siError); 
};

luego el script:

Código:

<script>
	$(function(){
		$("table").on( "click", ".modificar", function(){
			var var1 = $(this).data("var1");
			var var2 = $(this).data("var2");
			var var3 = $(this).data("var3");
			
			// Aca todo lo que sigue
		});
	});
</script>

Debo hacer algo más, porque ahora no solo no me ordena los nuevos elementos sino que las funciones q tiene que realizar al pulsar los botones tampoco me las hace