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

I have four <select> element.

我有四个

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

the child element <select> is replaced with the code received from Ajax, here is the Ajax Code i am using.

子元素

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

and the data being retrieved from process.php is.

以及从进程中获取的数据。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;

till here it works perfectly fine, the trouble starts when i select states from second <select> i.e <select name="stateId" id="select-states"> retrieved from process.php, when i select the value from this it does not trigger the function it is bound to, i am not sure what is happening, here is what i tried to do.

到这里为止，它工作得很好，当我从第二个从进程中检索。php，当我从中选择值时它不会触发它所绑定的函数，我不确定发生了什么，这就是我要做的。

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

and this does not fire. what is wrong with my code?

这个不会着火。我的代码有什么问题?

thanks.

谢谢。

2 个解决方案

#1

You should use .live().

您应该使用.live()。

From the documentation:

从文档:

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

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

#2

You need to use delegate() to add the change handler to dynamically-created elements:

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

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

This is necessary because your existing code runs only once ( when the document is loaded, presumably) and binds the event handler only to the elements that exist at that time. Delegate will bind the event all existing elements, plus all elements that are created in the future. For more information, please see the jQuery delegate documentation.

这是必要的，因为您现有的代码只运行一次(假定是在加载文档时)，并且只将事件处理程序绑定到当时存在的元素。委托将绑定事件所有现有元素，以及将来创建的所有元素。有关更多信息，请参见jQuery委托文档。

If you wish, you can use bind() instead. You would place the call to bind() in the AJAX call's success function to attach the event handler to the element after it is created.

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

EDIT

编辑

For a good analysis on the differences between delegate() and live(), see jQuery: live() vs delegate()

要更好地分析delegate()和live()之间的区别，请参见jQuery: live()和delegate()

#1