Event in tag Select work intermittently with javascript function

Question

I'm using javascript to perform ajax requests every time an item is selected in a combo. To do this, the Select tag executes the Onchange event.

But I'm having trouble calling the js function that is running intermittently. There are times when the value is changed and the function is not executed.

This is the JS snippet that should be executed every time the select changes:

 $(document).ready(function () { $('.tbl select.detalhes').change(function () { if ($(this).val() != "") { var id = $(this).val(); AjaxCall(urlPrefix + 'Detalhe.aspx/Ficha', '{ id: ' + id + ' }', function (data) { carregarFicha(data); }); $(this).prop('selectedIndex', 0); } }); 

Source cshtml where I insert the js in @section Head :

 @model IList<Round> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/SiteLayout.cshtml"; } @section Head { <script src="@Url.NonCached("~/Scripts/Index.js")" type="text/javascript"></script> } @if (Model != null && Model.Count > 0) { <h2>Rodada</h2> var textoRodadas = @Model.Count > 0 ? "Rodadas encontradas" : "Rodada encontrada"; <span class="total-registros"> <strong>@Model.Count</strong> @textoRodadas</span> <table border="0" cellpadding="0" cellspacing="0" class="tbl" id="table-round"> <thead> <tr> <th scope="col" class="ord">Rodada</th> <th scope="col" class="ord">Data Inicial</th> <th scope="col" class="ord">Data Final</th> <th scope="col" width="150" class="ord tits-th col-escura ">Regras</th> </tr> </thead> <tbody> @for (int i = 0; i < Model.Count; i++) { var item = Model[i]; var classe = "class=\\"" + item.Tipo.ToString(); if (item.Protegido == SimNao.Sim) { classe += " protegido "; } classe += i % 2 == 0 ? "\\"" : " odd\\""; var permitirCriarRegraComLances = !(item.Tipo == App.AdjudicacaoInicial); <tr @Html.Raw(classe) > <td class="tbl-nomeTipo-round") "> @Html.Hidden("id", item.Id) <span class="click-round tbl-nome-round">@item.Nome</span> </td> <td class="click-round tbl-data-round"> @item.DataInicio.ToString("dd/MM/yyyy") </td> <td class="click-round tbl-data-round"> @item.DataFim.ToString("dd/MM/yyyy") </td> <td class="col-escura"> <div class="grid-12-12 form"> @{ var regras = item.Regras.OrderBy(t => t.Nome).ToArray(); } <span class="txt-maior ">@regras.Length</span> @if (regras.Length > 0) { <select class="form-txt regras" id="reg1" onchange="mudou(this)"> <option value="" >Selecione</option> @foreach (var reg in regras) { <option value="@reg.Id">@reg.Nome</option> } </select> } </div> </td> </tr> } </tbody> </table> } else { <span>Sem resultados</span> } 

The application is only approved for Firefox and the code worked correctly until the company updated some clients with version 60.7.0. This particular version should be causing the problem. We can't update all clients with others versions.

Would anyone have any suggestions how fix this?

Answer 1

Try to use following two methods:

Method 1:

Try this-

 $('select').on('change', function() { //Add your logic console.log( this.value ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="1">Test 1</option> <option value="2">Test 2</option> </select> 

Method: 2

 function getval(sel) { //Add your logic console.log( sel.value ); } 

 <select onchange="getval(this);"> <option value="1">Test 1</option> <option value="2">Test 2</option> </select>