Tengo una página web con una opción Seleccionar y FORM, cuando un usuario cambia la selección, mi función de script jquery realizará dinámicamente ajax POST para reemplazar el formulario original con un formulario diferente (nuevos elementos de formulario).

Pero noté que el controlador Click ($ (button) .click () Event) no funciona en el formulario recién generado. Por favor ayuda en esto.

¿Es este un problema conocido en Jquery?

<select id=choice><option>....</select>
<div class=mytable>
<form id='dataform-10'>
.....
<button id="edit-10"></button>
</form>
<div>
<script>
  $(function(){
  $("#choice").change(function(){
    $.get('/portal/go?id='+this.value, function(data, status){ 
            //$(".mytable").hide();
            $(".mytable").html(data);
            $(".mytable").show();
          });
  });
});
</script>
<script>
$('[id^=edit]').on("click",function(e) {
    e.preventDefault();
   var num = this.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
            alert(data);
          });
});
</script>
1
serverliving.com 26 oct. 2019 a las 19:02

3 respuestas

La mejor respuesta

Como ha sido señalado por @ sh977218, la razón por la cual el evento click no funciona es la adición de nuevos elementos en DOM después del etiquetado inicial de los controladores de eventos. Intenta algo como esto:

<script>
function clickEventHandler(event) {
  // code for click event 
   event.preventDefault();
   var num = event.target.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
        alert(data);
      });
}
$('[id^=edit]').on("click", function(e){clickEventHandler(e);});
$("#choice").change(function(){
  $.get('/portal/go?id='+this.value, function(data, status){ 
        //$(".mytable").hide();
        $(".mytable").html(data);
        $(".mytable").show();
        $('[id^=edit]').on("click", function(e){clickEventHandler(e);});
      });
});
</script>
1
Arpit Bansal 27 oct. 2019 a las 08:37

... $('[id^=edit]').on("click",function(e) { ...

Debe ser

... $(".mytable").on("click", "[id^=edit]", function(e) { ...

¿Has probado así?

0
Goran Stoyanov 27 oct. 2019 a las 15:23

Cuando agrega un DOM nuevo, debe volver a conectar el evento.

0
sh977218 26 oct. 2019 a las 16:14