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的部分熟悉不过了， 这真让我抓狂。我在SO和其他地方看过超过30个相关的问题，例如

• 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); 

注意的是，在第二个我路过你的函数处理程序参照，而不是调用它。