Trigger change event

[ohad]

Hi,

I have a page that contain several input boxes and select box

The select box has extra data elements (name_id, group_id, group_id desc)

<div class="form-group mt-1">
	<select class="selectpicker" data-live-search="true" name="name_desc" id="name_desc" title="" style="width:150px;">
		<option value="1 - Name 1" data-name_id="1" data-group_id="1" data-group_id_desc="Group 1">1 - Name 1</option>
		<option value="2 - Name 2" data-name_id="2" data-group_id="2" data-group_id_desc="Second">2 - Name 2</option>
	</select>
</div>
<div class="form-group mt-1">
	<input  type = "hidden" name = "name_id" id="name_id" class="form-control form-control-input" value = "" title="" style="width:100px;">
  	<label class="form-control-placeholder" for="name_id">Name</label>
</div>
<div class="form-group mt-1">
	<input type="hidden" name="group_id" id="group_id" class="form-control form-control-input" value=" " title="" readonly="" style="width:100px;"  />
  	<label class="form-control-placeholder" for="group_id">Group</label>
</div>
<div class="form-group mt-1">
	<input type="text" name="group_id_desc" id="group_id_desc" class="form-control form-control-input" value=" " title="" readonly="" enabled="false" style="width:180px;" />
	<label class="form-control-placeholder" for="group_id_desc">Description</label>
</div>

I populate this boxes by Javascript

$(document).on('select change', '#name_desc', function() 
{
    var name_id = $(this).find(':selected').data('name_id');
    var name_desc = $(this).find(':selected').text(); 
    var group_id = $(this).find(':selected').data('group_id');                            
    var group_id_desc = $(this).find(':selected').data('group_id') + ' - ' + $(this).find(':selected').data('group_id_desc');
    $('#name_id').val(name_id);  
    $('#name_desc').val(name_desc);  
    $('#group_id').val(group_id);  
    $('#group_id_desc').val(group_id_desc);  
})

Becaue I populate the input boxes by JS, and I need to do an action when the group_id is changing, I tried to trigger change event:

$('#group_id').trigger('change'); 

and the change should call a function

$(".form-control-input").on("change", changefloat);
// and here is the fuction
function changefloat ()
{
	$(this).parents(".form-group").children("label").addClass("changefloat");
}

This makes the system to run in circles till I get an error:

Uncaught RangeError: Maximum call stack size exceeded

 

How can I force the system to trigger the change event without going into that loop?

 

Thank you

[requinix]

1. Events do not cause recursion, and so shouldn't cause any stack size problems.
2. I don't see any recursion in the code.

What's all the code for this form?

[ohad]

Thank you very much. Your reply helped me to understand that Im not looking at the place of the problem. So I checked, and find out my mistake. I had another function 

$(document).on('select change', '#group_id', function() 

that was suppose to serve other page, and that caused the recursion