Estoy tratando de activar una consulta ajax onchange pero no funciona. Al principio, estoy cambiando algunos HTML internos, luego relleno a través de una consulta ajax antes de que el usuario pueda seleccionar cualquier lista desplegable. Finalmente, quiero activar un cambio de ubicación para hacer otra consulta ajax. Desafortunadamente, el código no funciona. Todo el código está en un archivo test.js

 jQuery(document).ready(function($){ var locationDiv = document.getElementById('locations-ddl'); var selectionDivLoc = locationDiv.querySelector('.wpv-custom-search-filter__input'); selectionDivLoc.innerHTML = '<select id="location" name="location"></script>'; var repositoryDiv = document.getElementById('repositories-ddl'); var selectionDivRep = repositoryDiv.querySelector('.wpv-custom-search-filter__input'); selectionDivRep.innerHTML = '<select id="repository" name="repository"></script>'; var fondDiv = document.getElementById('fonds-ddl'); var selectionDivFond = fondDiv.querySelector('.wpv-custom-search-filter__input'); selectionDivFond.innerHTML = '<select id="fond" name="fond"></script>'; var seriesDiv = document.getElementById('series-ddl'); var selectionDivSeries = seriesDiv.querySelector('.wpv-custom-search-filter__input'); selectionDivSeries.innerHTML = '<select id="series" name="series"></script>'; $.ajax({ 'url' : ajaxurl, data: { 'action':'get_locations', // This is our PHP function below }, success:function(data) { // This outputs the result of the ajax request (The Callback) $("#location").replaceWith(data); }, error: function(errorThrown){ window.alert(errorThrown); } }); jQuery('#location').change(function(){ window.alert('yep'); $.ajax({ 'url' : ajaxurl, data: { 'action':'test', // This is our PHP function below }, success:function(data) { window.alert(data); }, error: function(errorThrown){ window.alert(errorThrown); } }); });