jquery select change event fire only one time - php

Question

Following is my code.
<script type="text/javascript">
//jQuery(document).ready(function($) {
//jQuery('select[name="Vendor"]').on('change', function(){
jQuery('select[name="Vendor"]').change(function(){
var selectedValue = $(this).val();
alert("Selected Text: " + selectedValue);
if(this.value ==2){
jQuery('.grid_data').show();
}else{
jQuery('.grid_data_rel').show();
}
});
//});
</script>
When i change select value event only occur for one time not alert showing on second time.
Html is coming from yii grid view like
'filter'=>array('1'=>"Recomonded",'2'=>"Related"), this is html in code and i used in yii frame work.
so here i can not see my static html code it's coming from gridview in yii.
<?php
$sql = "SELECT product_id,product_name FROM `user_master` as u
INNER JOIN product_detail as p
ON p.vendor_id = u.u_id WHERE p.vendor_id =2";
$result = Yii::app()->db->createCommand($sql)->queryAll();
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'user-master-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
'u_id',
// 'product_id',
// 'ut_id',
// 'country_id',
'fullname',
// 'ur.role_name',
array(
'header' => 'Role Name',
'name' => 'ur_id',
'value' => '$data->ur->role_name',
),
array(
'header' => 'Product Name',
'name' => 'product_id',
'value' => '$data->product_detail->product_name',
),
array(
'header' => 'Qty',
'name' => 'product_id',
'value' => '$data->product_detail->quantity',
),
array(
'header' => 'product_id',
'name' => 'product_id',
'value' => '$data->product_detail->product_id',
),
// 'representative_name',
'email',
// 'password',
'mobile',
array(
'header' => 'Image',
'name' => 'u_id',
'id'=>'u_id',
'type' => 'raw',
'filter'=>array('1'=>"Recomonded",'2'=>"Related"),
),
array(
'class'=>'CButtonColumn',
),
),
)); ?>

Answer 1

It's likely that the gridview is loading new html using ajax.
If that's the case, then your event listeners won't be attached to the new replacement select elements.
Why not use the commented out .on() method?
Move back to delegated events:
<script type="text/javascript">
jQuery(document).on('change', 'select[name="Vendor"]', function(){
if(this.value ==2){
jQuery('.grid_data').show();
}else{
jQuery('.grid_data_rel').show();
}
});