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.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.