jQuery选择器“change”事件未触发

Question

我有三个依赖选择框。 第一个选择框有一些值。

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

所以它运行良好。第二个选择框已填充，但是...选择“second”没有触发“change”事件。 为了获得此事件，我编写了以下代码：

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

但是没有弹出“test”警报。如何捕获第二个选择框的动态加载内容的“change”事件？

- x17az

---

你尝试过在AJAX的成功回调函数中添加change事件的赋值吗？ - Aaron Hathaway

你想在数据加载后立即触发#second的更改事件吗？如果您手动更改第二个选择，则应显示带有实际代码的警报框。 - davehauser

你使用的是哪个版本的jQuery？ - Nick Craver

顺便说一句：我会避免混合使用jQuery()和$()。 - davehauser

Answer 1

试试这个：

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

- Gadonski

Answer 2

由于 #second 元素仅存在，因此不必使用委托和 live 函数。

$('#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; 
});

- davehauser

Answer 3

你正在使用哪个版本的jQuery？任何早于1.4.x的版本都不支持live事件绑定到change事件。

(请参见为什么jQuery 1.3.3. live()不支持所有事件？)

这里是相关API http://api.jquery.com/live/

你可以看到警告：

在jQuery 1.3.x中，只有以下JavaScript事件（除自定义事件外）可以与.live()一起绑定：click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover和mouseup。

- James Wiseman

---

改为 .change(function() { })，但没有结果。 - x17az

Answer 4

自从jQuery 1.7更新版本以来，它引入了"on"方法，详情请参考http://api.jquery.com/on/。因此，如果你按照以下方式使用，肯定会触发"Change"事件。

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

- Dilip Langhanoja