manejar evento sobre la fila de una tabla

Hola a todos. Tengo una tabla con ofertas, y quiero manejar un evento en el que cuando haga click sobre determinada fila, me lleve a otra pantalla para poder editarla. El problema es que no consigo que la fila reaccione al click. A ver si podéis ayudarme:

Código :

$(document).ready(function(){
var nFila;
var url = "empresas-anuncios_model.php";
$.getJSON(url, function(ofertas){
//console.log(ofertas);
$.each(ofertas, function(i, oferta){
nFila = "<tr class='anuncios-fila'><td>"+oferta.id+"</td><td>"+oferta.titulo+"</td><td>"+oferta.area+"</td><td>"+oferta.n_suscritos+"</td><td>"+oferta.n_selec+"</td><td><input id='btn_borrar_oferta' class='icon-size' type='image' name='oferta_edit' src='images/oferta_delete.png' style='width: 25px; height: 25px' onclick=borrarOferta(this.parentNode.parentNode.rowIndex)></td></tr>";
$('#tabla-anuncios').append(nFila);
});

}).fail(function(){
console.log('Upss, algo no va bien :(');
}).done(function(){
console.log('Yeah');
});
});

function borrarOferta(i){
document.getElementById("tabla-anuncios").deleteRow(i);
}

$('.anuncios-fila').click(function(){
alert("hola");
});

De momento me conformo con que me saque un alert, pero ni eso... qué falla?

Y ya de paso me gustaría tambien preguntaros un par de cosas más. La primera es que como podéis ver tengo una función para borrar la fila deseada, pero no la he implementado con jQuery porque no me funcionaba, así que la deje así porque así sí que funciona, pero ya puestos pues me gustaría manejarlo tambien con jQuery.

Y la última: cuando borro esa fila, cómo hago para borrar el registro de la base de datos? tengo 3 archivos de la misma página: el HTML, el PHP y el JS, pero no sé cómo enlazar que al ejecutarse la función borrarOferta() se sincronice con un DELETE que aún no he escrito.

Gracias

Tienes un problema de comprensión de cómo funciona la web.
Tienes el código que agrega las filas de la tabla en el evento DOM ready. Ten esto presente.

Cuando el navegador carga una página web, primero lee el código HTML y con él renderiza la página mientras va creando el DOM. Paralelamente ejecuta todo el JavaScript en línea según lo encuentra, carga los archivos CSS y JS y las imágenes si las hubiera.

El evento DOM Ready se ejecuta cuando el navegador ha concluido de crear el DOM después de haber cargado la página.

Pero para entonces todo el código JavaScript en línea ya se ejecutó.

Tú tienes un código que agrega el evento onClick a todos los elementos con class "anuncios-fila" cuando todavía esos elementos no existen en el DOM, por lo tanto nunca habrá un evento onClick cuando sí existan.

Peor aún. Estás agregando al DOM elementos de la tabla por medio de una petición Ajax. Mucho tiempo después que el agregado del evento onClick se ha ejecutado que por supuesto no existían en ese momento.

Lo que deberías hacer es lo siguiente:

Código Javascript :

$(document).ready(function(){
var nFila;
var url = "empresas-anuncios_model.php";
$.getJSON(url, function(ofertas){
//console.log(ofertas);
$.each(ofertas, function(i, oferta){
nFila = "<tr class='anuncios-fila'><td>"+oferta.id+"</td><td>"+oferta.titulo+"</td><td>"+oferta.area+"</td><td>"+oferta.n_suscritos+"</td><td>"+oferta.n_selec+"</td><td><input id='btn_borrar_oferta' class='icon-size' type='image' name='oferta_edit' src='images/oferta_delete.png' style='width: 25px; height: 25px' onclick=borrarOferta(this.parentNode.parentNode.rowIndex)></td></tr>";
$('#tabla-anuncios').append(nFila);
// Inmediatamente después de haber agregado las filas.
  $('.anuncios-fila').click(function(){
     alert("hola");
   });
});

Tu segunda pregunta tiene la misma respuesta.

Tu última pregunta hazla en un hilo nuevo de este foro.

Muchas gracias por tu respuesta DriverOp, ya consigo eliminar la fila deseada, gracias por la explicación, error de principiante...

Ahora me surge otra duda, en este caso al querer extraer el valor del ID de la fila:

Código Javascript :

$(document).ready(function(){
   var nFila;
   var url = "empresas-anuncios_model.php";
   $.getJSON(url, function(ofertas){
      //console.log(ofertas);
      $.each(ofertas, function(i, oferta){
         nFila = "<tr class='anuncios-fila'><td class='oferta-id'>"+oferta.id+"</td><td>"+oferta.titulo+"</td><td>"+oferta.area+"</td><td>"+oferta.n_suscritos+"</td><td>"+oferta.n_selec+"</td>    <td><input class='btn_editar_oferta icon-size' type='image' name='oferta_edit' src='images/oferta_edit.png' style='width: 25px; height: 25px'></td>      <td><input class='btn_borrar_oferta icon-size' type='image' name='oferta_delete' src='images/oferta_delete.png' style='width: 25px; height: 25px'></td></tr>";
         $('#tabla-anuncios').append(nFila);
      });

      $('.btn_borrar_oferta ').click(function(){
         $(this).closest('tr').remove();
      });

      [color=#EF2929]$('.btn_editar_oferta').click(function(){
         var a = $(this).closest('.oferta-id').text();
         alert(a);
      });[/color]

      
      
   }).fail(function(){
      console.log('Upss, algo no va bien :(');
   }).done(function(){
      console.log('Yeah');
   });


});

He probado con .text(), .val(), .data()... y nada, sólo consigo que me muestre undefined o un campo vacío. Tambien he probado con lo siguiente:

Código Javascript :

[color=#EF2929]$('.btn_editar_oferta').click(function(){
         var a = $(this).find('.oferta-id').html();
         alert(a);
      });[/color]

Pero nada... obtengo undefined. Agradecería vuestra ayuda, un saludo.

Para mí, no deberías complicarte la vida y deberías poner el evento onClick directamente en el elemento:

Código HTML :

<input class='btn_editar_oferta icon-size' type='image' name='oferta_edit' src='images/oferta_edit.png' style='width: 25px; height: 25px' onClick=\"EditarFila('+oferta.id+'); return false;\">

y listo.