Perché una funzione di modifica di jQuery non funziona dopo aver caricato html con AJAX?

Question

Carico un modulo e popola dinamicamente una selezione tramite AJAX da un file PHP. Prima di implementare la selezione dinamica popolata AJAX, la mia funzione di modifica funziona (mostra semplicemente un altro input quando un utente seleziona "altro"). Ora la funzione di modifica non funziona.

So che la funzione di pronto è attiva perché le funzioni di jStepper funzionano. Ho provato questo con la funzione di modifica dentro e fuori la funzione ready. Ho la sensazione che la funzione di modifica venga caricata prima che l'acquisizione di AJAX sia terminata, ma è davvero importante?

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>"; 
var d = new Date(); 
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type) 
{ 
    $($type).find('type').each(function() 
    { 
     types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>"; 
    }); 
    types += "<option value='other'>Other(Specify)</option></select>"; 
    $('#ve_categoryNo_td').html(types); 
}); 
$(document).ready(function() 
{ 
    $('input[type=text]').click(function() 
    { 
     $(this).select(); 
    }); 
    $('#vehicle_entry').ajaxForm(function() 
    { 
     showMessage('vehicle_information_added'); 
    }); 
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999}); 
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999}); 
    $('#ve_vehicleYear').jStepper(); 
    $('#ve_purchasePrice').jStepper({minValue: 0}); 
    $('#ve_categoryNo').change(function() 
    { 
     if ((this.value) == "other") 
     { 
      $('#otherCategory').show(); 
      $('#otherCategory input[type=text]').focus(); 
     } else 
     { 
      $('#otherCategory').hide(); 
     } 
    }); 
}); 

Answer 1

modificare questo:

$('#ve_categoryNo').change(function() { 

a

$(document).on('change', '#ve_categoryNo', function() { 

Edit3: Questo sarebbe eseguire la migliore dopo un esame del codice più da vicino:

$('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() { 

come si lega più vicino all'elemento in questione.

---

Si dovrebbe anche mettere la chiamata ajax all'interno dello script pronto penserei.

Il motivo è che non c'è nulla nel DOM da associare quando viene istanziato. Usando il .on in questo modo lo lega invece al documento. Se si dispone di un altro elemento "fisso" che lo avvolge, potrebbe essere meglio associarlo a quello in sostituzione del "documento" in quanto potrebbe funzionare meglio.

EDIT: nota che POTRESTI aggiungere anche la gestione degli eventi di modifica dopo aver iniettato l'elemento come parte del completamento della chiamata ajax, ma se lo fai più di una volta, dovresti prima svincolarlo in quel caso.

EDIT2: dato che ci sono domande/osservazioni: dalla documentazione: http://api.jquery.com/on/

Collegamento molti gestori di eventi delegati vicino alla parte superiore dell'albero del documento può degradare le prestazioni. Ogni volta che si verifica l'evento, jQuery deve confrontare tutti i selettori di tutti gli eventi associati di quel tipo a ogni elemento nel percorso dalla destinazione dell'evento fino all'inizio del documento . Per ottenere prestazioni ottimali, collegare gli eventi delegati in una posizione del documento il più vicino possibile agli elementi di destinazione. Evitare l'uso eccessivo di di documenti o documenti.body per eventi delegati su grandi documenti .

Answer 2

penso che l'elemento si sono vincolanti per nella linea:

$('#ve_categoryNo').change(function() { ... 

non esiste ancora nel DOM, quindi l'evento non ottiene legato.

provare ad utilizzare la funzione di .live:

$('#ve_categoryNo').live('change', function() { ... }); 

Oppure fare in modo che i vostri elementi DOM esistono prima di tentare di associare gli eventi a loro.

Answer 3

lavorato dal documento pronto a cambiare lavora funzionalità Ajax

$(document).change(function(){ 
    $("#next").click(function() { 
    var questionid = $('#question').val();   
    var assementid = $('#assement').val();   
    var userid  = $('#user').val();   
    if($('.ansradio').is(':checked')) { 
     var answer = $('input[name=ans]:checked', '#questionajax').val(); 
     $.ajax({ 
      type: "POST", 
      url: "answer/", 
      data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid, 
      success: function(html){ 
       $("#questionajax").html(html).show(); 
      } 
     }); 
    } 
    else{ 
     alert("Please answer the questions"); 
    }  
    }); 

});