JavaScript - Llamada a funcion jquery deja de funcionar

Hola amigos. Estoy aprendiendo php y jquery, el tema es que venía bien hasta que hace una semana me topé un problema , y realmente nadie me pudo ayudar hasta ahora , quizás entendiendo el problema podría buscar o cambiar el código.
Estoy haciendo un altas baja modificación de productos en la misma página, uso php jquery y ajax.
En index.php tengo una tabla que se llena al iniciar con una consulta php y donde las 2 ultimas columnas son links, editar y borrar. Presionando alli , traigo el registro y lo vuelco a un formulario donde puedo editarlo o lo que sea. Hasta ahí todo ok. Como la consulta del inicio me carga "todos" los productos , incluí un select con categorías a los efectos de filtrar. Con el change del select mando la categoria al jquery y este me borra el tbody de la tabla y lo regenera con los productos correspondientes a esa categoria.
Aqui surge el inconveniente ... con la tabla regenerada ... los links editar y borrar ( que me debieran traer el producto por su id y llenar los input text de un formulario ) ya no funcionan . Luego de incontables cambios y pruebas ... llenando de alertas y console.log , encuentro que tras regenerar la tabla la llamada no entra a la funcion ( ni idea que pasa ..)
Mas tarde probé duplicando la funcion al terminar el bloque $( document )..... , puse :
$( document ).ajaxStop(function() {blabla ........ y la función que es $('a#edit-product').on('click', function(event) y ahi ... si funciona !!


El tema es que este problema me obliga a duplicar cualquier funcion para que funcione con los productos filtrados , y me agrega un problema nuevo , cuando clickeo en el select 1 vez, entra a ajax.stop , y en la consola me muestra 1 ( completó la funcion) , clickeo la segunda vez y la consola me muestra 3 , clickeo la tercera y me muestra 5 !!!! , en resumen , si alguien me puede ayudar explicando que ocurre y como solucionarlo me volveran las ganas de seguir avanzando ... me dejó mal no encontrar manera de entender por que ocurre ...
Paso los pastebin del código involucrado :

miscript.js : http://pastebin.com/B72cydHL
index.php : http://pastebin.com/EuLjdnt0

Gracias !!!








Y

Hola Luis, el problema es simple... cuando generas un evento en jquery, ese evento funciona para el DOM (Document Object Model) cargado en la actualidad... si tu modificas el contenido de la pagina, esos eventos de jquery no te funcionaran, ya que no saben que existe dicho código.
Es por la misma razón, que tienes que incluir tus eventos una vez cargada la pagina, si lo haces al principio sin utilizar el ready() tampoco te funcionaran.

La solución como tu bien has encontrado, es rellamar a los eventos cada vez que se modifica el DOM de la pagina... pero antes de rellamarlos, tienes que cancelar los anteriores con el unbind() http://api.jquery.com/unbind/

Espero que me haya sabido explicar... coméntanos, ok?

gracias xve ! ahora entiendo un poco más por donde viene el tema. O sea que cuando carga la página funciona todo ok hasta que modifico los items que cargo en la tabla tras vaciarla y regenerarla. A partir de ahi la nueva estructura pisa a la otra y ya no existe vínculo con el jquery , genial, no encontraba la lógica.
Voy a duplicar y descargar con unbind. El problema que me queda es que ya con el dom modificado, tras reescribir la tabla, al clickear en cualquier elemento ese click la 1era vez funciona bien, clickeo en otro y es como clickear 3 veces , clickeo en otro y ya clickea 5 .... eso lo veo porque tengo una alerta de alertify que titila tantas veces como cicla. Tambien puse un console.log y me muestra con cada click : 1 3 5 10 etc...

Ya está solucionado. gracias xve!

Hola luis, si ya lo solucionaste hace mucho tiempo, podrias por favor de publicar que linea de codigo utilizaste ya que ahora estoy teniendo el mismo problema que tu.