Событие jQuery срабатывает один раз, а затем никогда больше

Question

Я занимаюсь с помощью простого обработчика событий JQuery в течение нескольких часов. Мой обработчик событий срабатывает ровно один раз, когда страница загружается и никогда больше не зависит от события или взаимодействия с полем выбора. При отсрочке предупреждение (когда у меня есть) показывает первый вариант выбора. Когда нет, предупреждение пустое.

Все, что я хочу, это выбрать поле для загрузки из AJAX и выбрать пользователя для запуска другого вызова AJAX.

HTML:

<select id="connection" name="Connection"></select> 
<div id="testme" style="background: #CCC; width:100%; height:50px;position:relative;color:red">testing</div> 

Javascript:

$(document).ready(function() { 
    // Event handler. Tried as a separate function and as a parameter to $.on(...) 
    function connectionSelected() { 
     var str = $('#connection option:selected').text(); 
     alert(str); 
     $("#testme").text(str); 
    } 

    var $connectionSelect = $('#connection'); 
    //$connectionSelect.selectmenu(); // Tried enabling/disabling 

    // Tried this and all JS code inside and outside of $(document).ready(...) 
    $.when(
    $.ajax({ 
     dataType: "JSON", 
     url: '@Url.Content("~/API/ConnectionHint")', // The AJAX call (using ASP Razor) works fine 
     success: function(data) { 
      // This function is always called and works 
      var items = []; 
      $.each(data, function(key, val) { 
       items.push("<option value='" + key + "'>" + val + "</option>"); 
      }); 
      $connectionSelect.append(items.join("")); 
      // Tried setting up the event handler here 
     }, 
     error: function() { 
      $connectionSelect.html('<option id="-1">none available</option>'); 
     } 
    }) 
    ).then(function() { 
     //$("#connection option").blur(connectionSelected()).change(); 
     $("#connection").on("change", connectionSelected()); 
    }); 
}); 

Пробовал десятки вариаций обработчика событий, несколько событий, внутри и снаружи deferred.done и deferred.then, и т.д .. Например:

$connectionSelect.selectmenu({ 
    change: function (event, data) { 
     $('#connection').change(function() { 
      var str = ""; 
      $('#connection').each(function() { 
       str += $(this).text() + "<br>"; 
      }); 
      $("#testme").text(str); 
     }); 
    } 
}); 

Обычно я пишу внутренний код и знаком только с частями JQuery и Это сводит меня с ума. Я рассмотрел более 30 связанных вопросов по SO и в других местах, например.

• Jquery event fires once
• Jquery .change() function not working with dynamically populated SELECT list
• http://jqueryui.com/selectmenu/#product-selection

Любые идеи приветствуются.

Answer 1

Вместо

$("#connection").on("change", connectionSelected()); 

попробовать

$("#connection").on("change", connectionSelected); 

Обратите внимание, что во втором я передаю свой обработчик функции по ссылке, а не вызывать его.