Question

我有四个<select>元素。

<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>

子元素<select>被替换为从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;

直到这里它工作得很好，当我从第二个<select>中选择状态，即从process.php中检索到<select name="stateId" id="select-states">时，麻烦就开始了，当我从中选择值时它不触发函数它我不知道发生了什么，这就是我试图做的事情。

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

这并不会激发。我的代码出了什么问题？

感谢。

Answer 1

您应该使用.live()。

来自文档：

描述：为所有元素附加一个处理程序现在和将来匹配当前选择器。

Answer 2

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

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

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

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

修改

要对delegate()和live()之间的差异进行详细分析，请参阅jQuery: live() vs delegate()

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

2 个答案: