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>
3 respuestas
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>
... $('[id^=edit]').on("click",function(e) { ...
Debe ser
... $(".mytable").on("click", "[id^=edit]", function(e) { ...
¿Has probado así?
Cuando agrega un DOM nuevo, debe volver a conectar el evento.
Nuevas preguntas
javascript
Para preguntas relacionadas con la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excluyendo ActionScript). Esta etiqueta rara vez se usa sola, pero a menudo se asocia con las etiquetas [node.js], [json] y [html].