Ajax Request is Not Working After CGridView Update

Question

I Want to open a CJuiModel by Clicking on CGridView CButtonColumn view Button as my CGridView and CJuiModel is as:-

     <?php
                $dataProvider = new CArrayDataProvider($model->exhibitorLocation, array(
                    'keys' => array('productId'),
                ));


                $this->widget('zii.widgets.grid.CGridView', array(
                    'dataProvider' => $dataProvider,
                    'id' => 'exhibitor-location-grid',
                    'summaryText' => false,
                    'pager' => array(
                        'class' => 'CLinkPager',
                        'header' => false,
                    ),
                    'columns' => array(
                        array(
                            'header' => 'S No.',
                            'value' => '++$row',
                        ),
                        array(
                            'header' => 'Hall No',
                            'value' => '$data->location->hallNo',
                        ),
                        array(
                            'header' => 'Stand No',
                            'value' => '$data->standNo',
                        ),
                        array(
                            'class' => 'CButtonColumn',
                            'header' => 'Manage',
                            'template' => '{view}{delete}',
                            'buttons' => array(
                                'view' => array(
                                    'imageUrl' => $this->module->assetsUrl . "/images/info_icon.png",
                                    'options' => array('class' => 'exb-location'),
                                    'url' => 'Yii::app()->createUrl("admin/venuemap/viewExbLocation", array("exbLocId"=>$data->primaryKey))',
                                ),
                                'delete' => array(
                                    'imageUrl' => $this->module->assetsUrl . "/images/delete_icon.png",
                                    'url' => 'Yii::app()->createUrl("admin/venuemap/deleteExbLocation", array("exbLocId"=>$data->primaryKey))',
                                ),
                            ),
                            'htmlOptions' => array(
                                'style' => 'width:100px;float:center'
                            )
                        ),
                    ),
                    'rowCssClassExpression' => '($row%2 ? "visit2" : "visit1")',
                    'itemsCssClass' => 'visitor_list',
                    'htmlOptions' => array(
                    )
                ));
                ?>
                <div class="name_field">Hall No<span>*</span></div>
                <?php echo CHtml::dropDownList('hall-no', '', CHtml::listData(Venuemap::model()->findAll(), 'locationId', 'hallNo'), array('class' => 'name_input2', 'id' => 'hall-no')); ?>

                <div class="name_field">Stand No</div>
    <?php echo CHtml::textField('Stand No', '', array('class' => 'name_input', 'id' => 'stand-no')); ?> 

                <?php
                echo CHtml::ajaxLink("Add Location", Yii::app()->createUrl('admin/venuemap/addExbLocation'), array(
                    'type' => 'post',
                    'data' => array(
                        'exhibitorId' => $model->exhibitorId,
                        'standNo' => 'js: $("#stand-no").val()',
                        'locationId' => 'js: $("#hall-no").val()'
                    ),
                    'success' => 'function(html){  $.fn.yiiGridView.update("exhibitor-location-grid"); }'
                        ), array('class' => 'search_btn'));
                ?>

                 <?php
                    $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
                        'id' => 'location-dialog',
                        'options' => array(
                            'title' => 'View Location',
                            'autoOpen' => false,
                            'modal' => true,
                            'width' => 'auto',
                            'height' => 'auto',
                            'resizable' => false
                        ),
                    ));
                    $this->endWidget();
                    ?>

    <?php 

    Yii::app()->clientScript->registerScript('view-location-ajax', "


    $('.exb-location').click(function(){
       url=$(this).attr('href');
       $.ajax({
       type: 'post',
       url: url,
       success: function(result){
            $('#location-dialog').html(result).dialog('open');
            $('#draggable').draggable(); 
            return false;
        }
    });
       return false;
    });


    ");
    ?>

View Button is working fine and open a CJuiModel on click but when I add a new Location in CGridView . On Clicking on view button my CJuiModel is not opening and page is redirecting to Url.Why my jquery is getting failed on updating CGridView. Help..

Answer 1

Change ajax call using JQuery 'on' instead direct event binding:

This:

...

$('.exb-location').click(function(){
...

Change for:

...

$('.exb-location').on('click', '.exb-location', function(){
...

Html Elements are destroyed and regenerated after CGridview refresh. Direct JQuery events only work with existing elements before DOM load. When they are removed, or new elements are added later, direct events don't work.