jQuery
  1. jQuery
  3. forma dynamic jquery, evento su campo dinamico
Intereting Posts
.click () evento quando ‘Apri in una nuova scheda / finestra’ jqGrid Aggiornamento dei dati locali (object JSON) Come implementare EF su molte relazioni in ASP MVC senza MultiSelectBox usando jQuery? Ho bisogno di una casella di testo mascherata in asp.net I dati di stringa non vengono inviati con $ .ajax alla pagina php Richieste Ajax bloccate e in sospeso da parte di JQuery in Chrome Jquery.get () non funziona in IE8 / 9. Non caricherà le pagine in cache 304 non modificate Chrome nasconde l’immagine di sfondo con gli autofills Firma della richiamata dopo che sono state completate più richieste Ajax Più campi di testo in un singolo div con forma dynamic jQuery Backbone aggiungere rimuovere dall’anomalia UL Ottenere il testo da una pagina web usando jquery e AJAX InnerHTML / outerHTML in IE non riflette lo stato della casella di controllo eccetto in modalità Quirks Come verificare se iOS utilizza la navigazione privata Visualizza l’immagine di ‘caricamento’ quando è in corso una chiamata AJAX

forma dynamic jquery, evento su campo dinamico

Ho iniziato a creare un modulo dinamico utilizzando jquery per creare ogni domanda alla volta, ma sembra esserci un problema con un evento sul contenuto dinamico. 

div class="container"> 
Add or Remove text boxes with jQuery
 
 
 
 
 
   <!--
--> 
Answer with Radio 
 Add More

javascript 

 jQuery(document).ready(function($){ $('#box1').keyup(function () { var impt = '1. '+ $(this).val(); $(".preview").html(impt); }); $('#radio1').keyup(function () { alert("radio1"); var impt = 'Please choose'+ $(this).val(); appendTo(".preview").append(impt); //$(".preview").append(impt); }); $('.my-form .ansRadio').click(function(){//when radio answer is clicked show the radio answer options var n = $('.text-box').length; var box_html = $('
 remove option
'); box_html.hide(); $('.answer').hide(); $('.my-form div.text-box:last').after(box_html); box_html.fadeIn('slow'); return false; }); $('.my-form').on('click', '.remove-option', function(){ $(this).parent().css( 'background-color', '#FF6C6C' ); $(this).parent().fadeOut("slow", function() { $(this).remove(); $('.box-number').each(function(index){ $(this).text( index + 1 ); }); $('.answer').show(); }); return false; });

});

Sembra che ci sia un problema nel trovare il 

 $('#radio1').keyup(function ()

lavorare.

Ecco il jsfiddle

Come puoi vedere il link ‘remove option’ funziona ma il tipo nella casella delle opzioni non triggers la funzione keyup.

Qualsiasi aiuto molto apprezzato.

stai vincolando l’evento keyup quando l’elemento non è nel DOM, prova invece questo:

$('.my-form').on("keyup", "#radio1", function () {

In jQuery se si aggiunge un elemento a DOM DYNAMICALLY, quindi per albind un evento a quell’elemento è necessario scrivere o chiamare il codice per albind immediatamente l’evento dopo averlo accodato al DOM.

Codice aggiornato 

 jQuery(document).ready(function($){ $('#box1').keyup(function () { var impt = '1. '+ $(this).val(); $(".preview").html(impt); }); $('.my-form .ansRadio').click(function(){//when radio answer is clicked show the radio answer options var n = $('.text-box').length; var box_html = $('
 remove option
'); box_html.hide(); $('.answer').hide(); $('.my-form div.text-box:last').after(box_html); box_html.fadeIn('slow'); $('#radio1').keyup(function () { alert("radio1"); var impt = 'Please choose'+ $(this).val(); appendTo(".preview").append(impt); //$(".preview").append(impt); }); return false; }); $('.my-form').on('click', '.remove-option', function(){ $(this).parent().css( 'background-color', '#FF6C6C' ); $(this).parent().fadeOut("slow", function() { $(this).remove(); $('.box-number').each(function(index){ $(this).text( index + 1 ); }); $('.answer').show(); }); return false; });

http://jsfiddle.net/santoshj/xu9g1t0n/2/