jquery 中没有触发事件，什么问题？

Question

我有四个 元素。

<div id="select-countries-container">
        <select name="countryId" id="select-countries">
            <option value="">Choose Country &raquo;</option>
        <?php foreach($location->fetch(array('table' => 'countries')) as $country) { ?>
            <option value="<?php echo $country['id']; ?>"><?php echo $country['name']; ?></option>
        <?php } ?>
    </select>
</div>
<div id="select-states-container"><select disabled="disabled"><option value="">Choose State &raquo;</option></select></div>
<div id="select-cities-container"><select disabled="disabled"><option value="">Choose City &raquo;</option></select></div>
<div id="select-areas-container"><select disabled="disabled"><option value="">Choose Area &raquo;</option></select></div>

子元素 替换为从 Ajax 接收的代码，这是我正在使用的 Ajax 代码。

$('#select-countries').change(function(){
    var countryId = $(this).val();
    if(countryId == ''){
        $('#select-states-container').html(chooseState);
    } else {
        $.ajax({
            type: 'POST',
            url:  'process.php',
            data: 'countryId='+countryId,
            beforeSend: function() {
                $('#select-states-container').html(loadingText);
            },
            success: function(states){
                if(states == 'null') {
                    $('#select-states-container').html(emptyState);
                } else {
                    $('#select-states-container').html(states);
                }   
            }
        });
    }
});

从 process.php 检索的数据是。

$select  = '<select name="stateId" id="select-states">';
$select .= '<option value = "">Choose State &raquo;</option>';
foreach($states as $state) {
    $select .= '<option value = "'.$state['id'].'">'.$state['name'].'</option>';
}
$select .= '</select>';
echo $select;

直到这里它工作得很好，当我从第二个 中选择状态时，麻烦就开始了，即 从 process.php 检索，当我从中选择值时，它不会触发它绑定到的函数，我不确定发生了什么，这就是我尝试做的。

$('#select-states').change(function(){
        alert('Fire');
});

这不会火。我的代码有什么问题吗？

谢谢。

Answer 1

您应该使用 .live()。

从文档中：

描述：将处理程序附加到所有元素的事件
匹配当前选择器，现在和将来。

Answer 2

您需要使用 delegate() 将更改处理程序添加到动态创建的元素：

$("body").delegate("#select-states", "change", function(){
    ...

这是必要的，因为您现有的代码仅运行一次（大概是在加载文档时）并且仅绑定事件处理程序到当时存在的元素。委托将绑定事件所有现有元素，以及加上将来创建的所有元素。有关详细信息，请参阅 jQuery 委托文档。

如果您愿意，可以使用 bind() 代替。您可以将对 bind() 的调用放在 AJAX 调用的成功函数中，以便在创建元素后将事件处理程序附加到该元素。

编辑

有关delegate()和live()之间差异的详细分析，请参阅jQuery：live() 与 delegate()