jQuery选择“更改”事件未触发答案

【问题标题】：jQuery select "change" event not firedjQuery选择“更改”事件未触发
【发布时间】：2014-03-09 08:36:20
【问题描述】：

我有三个依赖选择。第一个，有一些价值观。

<select id="first">
<option value="1">v1</option>
<option value="2">v2</option>
</select>

第二个和第三个是空白的：

<select id="second"></select>
<select id="third"></select>

我想通过 ajax 请求填充空白选择。所以我这样做：

jQuery('body').delegate('#first','change',function(){
jQuery.ajax(
{
'type':'GET',
'data':{'changed':$('#first').val()},
'url':'myURL1',
'cache':false,
'success':function(html){jQuery("#second").html(html)}});
return false;
});

所以它工作正常。第二个选择已填充，但是......没有为选择“第二”触发“更改”事件。为了得到这个事件，我写了：

   $(document).ready(function()
    {
        $('#second').live("change", function()
        {
            alert('test');
        });
    });

但看不到警报“测试”。如何为第二次选择的动态加载内容捕获此“更改”事件？

【问题讨论】：

您是否尝试在 AJAX 的成功回调中添加更改事件的分配？
您想在加载数据后立即触发#second 的更改事件吗？如果您手动更改第二个选择，则警报框应显示您的实际代码。
您使用的是哪个版本的 jQuery？
顺便说一句：我不想混合 jQuery() 和 $()

标签： jquery events select

【解决方案1】：

试试这个：

$('#second').change(function(){
    alert('Test')
})

【讨论】：

【解决方案2】：

因为 #second 元素只是存在，所以不必使用委托和实时函数

$('#first').change(function(){ 
  $.ajax( 
  { 
    'type':'GET', 
    'data':{'changed':$('#first').val()}, 
    'url':'myURL1', 
    'cache':false, 
    'success':function(html){
      $("#second").html(html);
     }
   }); 
   return false; 
});

$('#second').live("change", function()   
{   
  alert('test');   
});

如果您想在填充第二个选择后立即发出警报，请将其包含在 $.ajax() 的回调函数中

$('#first').change(function(){ 
  $.ajax( 
  { 
    'type':'GET', 
    'data':{'changed':$('#first').val()}, 
    'url':'myURL1', 
    'cache':false, 
    'success':function(html){
      $("#second").html(html);
      $("#second").change();
     }
   }); 
   return false; 
});

【讨论】：

【解决方案3】：

您使用的是什么版本的 jQuery？ 1.4.x 之前的任何内容都不支持live 事件change。

（见Why doesn't jQuery 1.3.3. live() support all events?）

这是它的 API http://api.jquery.com/live/

您可以在警告中看到：

在 jQuery 1.3.x 中只有以下 JavaScript 事件（除了自定义事件）可以绑定 .live(): 点击, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout、mouseover 和 mouseup。

【讨论】：

更改为 .change(function() { }) 没有结果

【解决方案4】：

到目前为止，jquery 从 jQuery 1.7 更新其版本，其引入“on”参见此处http://api.jquery.com/on/。因此，如果您确定使用以下方式，它将调用“更改”事件。

 $(document).ready(function()
{
    $('#second').on("change", function()
    {
        alert('test');
    });
});

【讨论】：