MONZTAAA MONZTAAA - 7 months ago 19
Javascript Question

jQuery change event only triggers in one out of three elements

I have the following problem. My jQuery change event should activate everytime I change one of the elements shown in my HTML code with the class "validation".

HTML CODE

<div class="controls form-inline">
<label for="ff_elem295" id="bfLabel295" class="control-label"><i class="icon-asterisk"></i> <?php echo JText::_('COM_CSTUDOMUS_DIRECCION'); ?></label>
<input type="text" id="ff_elem295" value="<?php echo $post['direccion'] ? $post['direccion'] : "";?>" name="direccion" class="validation ff_elem inputbox required" required="required">
</div>

<div class="controls form-inline">
<label for="ff_elem305" id="bfLabel305" class="control-label"><i class="icon-asterisk"></i> <?php echo JText::_('COM_CSTUDOMUS_PROV'); ?></label>

<span id="idPro" data-attr='class="validation required" required="required"'></span>
<select id="id_provincia" name="id_provincia">
<option value="" selected="selected"><?php echo JText::_('COM_CSTUDOMUS_SELECT_PROVINCIAS');?></option>
</select>
</div>

<div class="controls form-inline">
<label for="ff_elem306" id="bfLabel306" class="control-label"><i class="icon-asterisk"></i> <?php echo JText::_('COM_CSTUDOMUS_MUNI'); ?></label>

<span id="idMun" data-attr='class="validation required" required="required"'></span>
<select id="id_municipio" name="id_municipio">
<option value="" selected="selected"><?php echo JText::_('COM_CSTUDOMUS_SELECT_MUNICIPIOS');?></option>
</select>
</div>


The event only triggers when you write in the input box and it never triggers when you change country or state/province.

JS CODE

jQuery(document).ready(function () {

var direccion="";
var flag = false;
jQuery(".validation").change(function () {
flag = true;
alert("change");
jQuery(".validation").each(function () {
if (jQuery(this).val().trim() == "") {
flag = false;
}
});
if (flag==true) {
alert("true");
var calle = jQuery("#ff_elem295").val();
var municipio = jQuery("#id_municipio option:selected").text();
var provincia = jQuery("#id_provincia option:selected").text();

direccion = calle +","+ municipio +","+ provincia;
direccion = direccion.replace(/\s/g,'+');

jQuery.ajax({
url: "index.php?option=com_cstudomus&controller=saloninmobiliarios&task=calcularDistancias",
data : {direccion : direccion}
}).done(function(data){
var sitios = data.split(',');
jQuery("#ff_elem245").val(sitios[7]); //Supermercado
jQuery("#ff_elem251").val(sitios[0]); //Centro Comercial
jQuery("#ff_elem252").val(sitios[1]); //Colegio
jQuery("#ff_elem254").val(sitios[4]); //Centro Ciudad
jQuery("#ff_elem259").val(sitios[5]); //AutobĂșs
jQuery("#ff_elem261").val(sitios[3]); //Metro
jQuery("#ff_elem263").val(sitios[2]); //Aeropuerto
jQuery("#ff_elem267").val(sitios[6]); //Ambulatorio
});
}
});
});


I believe the issue is that the class "validation" is assigned to the select field after you choose the country. The same thing happens to city. It seems that the change event points to the first object which is already destroyed even though its created afterwards (it still points to the previous one).

How can I solve this?

Answer

Event handlers only work on the elements that match the selector at the time the event handler is bound. If you're going to change the class later and expect the event handler to work, you'll have to delegate it to a parent element.

jQuery(document).on('change', '.validation', function () {

    // code here

});

You should pick a parent element that is closer to limit the collection, something like

jQuery('.controls').on('change', '.validation', function () { ...